How can I make my html text containers more responsive? - html

Question

My site looks like this:
DESKTOP:
MOBILE:
However, I need the text to be inline with the middle of the corresponding image (both items centered, so that the subtext isn't off-centered).
My HTML:
<div class="col-lg-3>
<div class="container--wrap">
<div class="inward-text">
<br>
<img src="green-up.png" class="center" style="vertical-align: middle;">
<br>
<span style="color: #9BDDB4; font-family: robotobold; font-size: 30px; vertical-align: middle;" "="">4.51%</span>
<br>
<span style="color: #ffffff; font-family: robotolight; font-weight: lighter; font-size: 15px">from yesterday</span>
<img src="red-up.png" class="center" style="padding-top: 30px; vertical-align: middle;">
<br>
<br>
<br>
<br>
<div id="txtdown">
<span style="color: #EE939C; font-family: robotobold; font-size: 30px; vertical-align: middle;">1.80%</span>
<br>
<span style="color: #ffffff; font-family: robotolight; font-weight: lighter; font-size: 15px">from yesterday</span>
</div>
<img src="flag-ic.png" class="center" style="padding-top: 30px; vertical-align: middle;">
<br>
<br>
<br>
<div id="txtdown">
<span style="color: #AEAEAE; font-family: robotobold; font-size: 30px; vertical-align: middle;">text</span>
<br>
<span style="color: #ffffff; font-family: robotolight; font-weight: lighter; font-size: 15px">subtext</span>
</div>
</div>
</div>
</div>
Relevant CSS:
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
}
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 135px;
}
.inward-text span{
display: inline;
margin-left: 10px;
}
.inward-text img{
margin-left: 80px;
float: left;
}
#txtdown{
margin-top: 10px;
}
How do I do what I want to be doing?
EDIT:
I apologise in advance for the extremely messy <br>s that there are!

Answer 1

br tags it is not the best approach, I try to simplify your solution, block with your image and text should be like there:
<div class="items">
<div class="item red">
<img/>
<div class="item__text">
<span class="percent"></span>
<span class="description"></span>
</div>
</div>
<div class="item green">
<img/>
<div class="item__text">
<span class="percent"></span>
<span class="description"></span>
</div>
</div>
<div class="item grey">
<img/>
<div class="item__text">
<span class="percent"></span>
<span class="description"></span>
</div>
</div>
</div>
CSS
.items {
display: flex;
flex-direction: column;
}
.item {
display: flex;
align-items: center;
}
.item__text {
display: flex;
flex-direction: column;
}
And don't use be, use margin or padding, it is a more flexible and reliable approach.

Answer 2

Html:
<div class="container--wrap">
<div class="inward-text">
<div class="flex">
<img src="green-up.png" class="center" style="vertical-align: middle;">
<div id="txtdown">
<span style="color: #9BDDB4; font-size: 30px; vertical-align: middle;">4.51%</span>
<span style="color: #ffffff; font-weight: lighter; font-size: 15px">from yesterday</span>
</div>
</div>
<div class="flex">
<img src="green-up.png" class="center" style="padding-top: 30px; vertical-align: middle;">
<div id="txtdown">
<span style="color: #EE939C; font-size: 30px; vertical-align: middle;">1.80%</span>
<span style="color: #ffffff; font-weight: lighter; font-size: 15px">from yesterday</span>
</div>
</div>
<div class="flex">
<img src="green-up.png" class="center" style="padding-top: 30px; vertical-align: middle;">
<div id="txtdown">
<span style="color: #AEAEAE; font-size: 30px; vertical-align: middle;">text</span>
<span style="color: #ffffff; font-weight: lighter; font-size: 15px">subtext</span>
</div>
</div>
</div>
</div>
Css:
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
}
.flex {
display: flex;
}
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.inward-text span {
display: inline;
margin-left: 10px;
}
#txtdown {
margin-top: 10px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}

Answer 3

Step 1
Remove all inline styles from each element and place them in CSS, as classes, along these lines:
.percent {
color: #EE939C;
font-family: robotobold;
font-size: 30px;
vertical-align: middle;
}
.detail {
color: #ffffff;
font-family: robotolight;
font-weight: lighter;
font-size: 15px;
}
Step 2
Remove all <br/>s
Step 3
Wrap each of the items as the following markup
<div class="fancy-item"> <!-- your group -->
<img ...>
<div> <!-- flexbox sub-group -->
<span class="percent">1.80%</span>
<span class="detail">from yesterday</span>
</div>
</div>
Add the rest of your CSS:
.fancy-item {
display: flex;
align-items: center;
}
Step 4
Add some bottom margin to .percent or top margin to .detail if you want to set them slightly apart.
You're done!
Note: You don't have to use my class names, use whatever makes sense in your context.
Another note: Steps 1-3 are the most important. They allow you to change all the items at once, if you don't like a particular detail, without having to go through each of them and do the modification. DRY is one of the most important principles in programming.