I have this, which is basically a table, with two columns, and I am trying my best to make the elements in said table, mobile responsive:
setTimeout(function() {
odometer.innerHTML = '1925'
}).fiftyFiftySection {
background-color: #000;
}
.odometer {
font-size: 3em;
text-align: center;
width: 180px;
}
table td{
column-width: 1000px;
text-align: center;
}
#dollarSign {
height: 50px;
width: 30px;
}
#fiftyFiftySignImage {
width:400px;
height:300px;
margin-left: -100px;
}
@media (max-width: 500px) {
table td{
column-width: 100px;
text-align: left;
}
#dollarSign {
/* uncomment out display when you want it to display */
/* display: none; */
width: 20px;
height: 20px;
}
#currentEstimatedPayout {
display: none;
}
#odometer {
margin-right: 50px;
margin-top: 20px;
}
#fiftyFiftySignImage {
width:300px;
height:200px;
margin-left: -50px;
}
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/odometer@0.4.8/themes/odometer-theme-train-station.css">
<script src="https://cdn.jsdelivr.net/npm/odometer@0.4.8/odometer.min.js"></script>
<section class="fiftyFiftySection" id="fiftyFiftySection">
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td>
<img id="fiftyFiftySignImage" src="https://res.cloudinary.com/piersolutions/image/upload/v1637109327/5050_frfhsy.png">
</td>
<td>
<h4 id="currentEstimatedPayout" style="color: #ffffff;">Current Estimated Payout</h4>
<!-- <br> -->
<img id="dollarSign" src="https://res.cloudinary.com/piersolutions/image/upload/v1637361906/dollar-sign-2_a2hsh3.png" alt=""><div id="odometer" class="odometer">000000</div>
</td>
</tr>
</table>
</section>but as you can see, on mobile version, it puts the dollar sign image on top of the odometer, when I need it beside it! I don't know how to fix this, i've tried so many different things. any ideas?
Add a div and use flex to align.
setTimeout(function() {
odometer.innerHTML = '1925'
}).fiftyFiftySection {
background-color: #000;
}
.odometer {
font-size: 3em;
text-align: center;
width: 180px;
}
table td{
column-width: 1000px;
text-align: center;
}
#dollarSign {
height: 50px;
width: 30px;
}
#fiftyFiftySignImage {
width:400px;
height:300px;
margin-left: -100px;
}
@media (max-width: 500px) {
table td{
column-width: 100px;
text-align: left;
}
#dollarSign {
/* uncomment out display when you want it to display */
/* display: none; */
width: 20px;
height: 20px;
}
#currentEstimatedPayout {
display: none;
}
#odometer {
margin-right: 50px;
margin-top: 20px;
}
#fiftyFiftySignImage {
width:300px;
height:200px;
margin-left: -50px;
}
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/odometer@0.4.8/themes/odometer-theme-train-station.css">
<script src="https://cdn.jsdelivr.net/npm/odometer@0.4.8/odometer.min.js"></script>
<section class="fiftyFiftySection" id="fiftyFiftySection">
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td>
<img id="fiftyFiftySignImage" src="https://res.cloudinary.com/piersolutions/image/upload/v1637109327/5050_frfhsy.png">
</td>
<td>
<h4 id="currentEstimatedPayout" style="color: #ffffff;">Current Estimated Payout</h4>
<!-- <br> -->
<div style="
display: flex;
justify-content: center;
align-items: center;
">
<img id="dollarSign" src="https://res.cloudinary.com/piersolutions/image/upload/v1637361906/dollar-sign-2_a2hsh3.png" alt=""><div id="odometer" class="odometer">000000</div>
</td>
</tr>
</table>
</section>Use this code.
#dollarSign {
vertical-align: middle;
}