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/[email protected]/themes/odometer-theme-train-station.css"> 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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?

CodePudding user response：

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/[email protected]/themes/odometer-theme-train-station.css"> 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Use this code.

#dollarSign {
    vertical-align: middle;
}