Currently, I have a table-like structure with two columns that I am struggling to make mobile responsive. Take a look at the code snippet below:
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="402f242f2d2534253200706e746e78">[email protected]</a>/themes/odometer-theme-train-station.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97f8f3f8faf2e3f2e5d7a7b9a3b9af">[email protected]</a>/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>On the mobile version, the dollar sign image ends up on top of the odometer instead of beside it. I've exhausted my attempts to fix this issue. Any suggestions or solutions are greatly appreciated!