make table responsive using css

Question

I have this:

.fiftyFiftySection {
  background-color: #000;
}

.odometer {
  font-size: 3em;
  text-align: center;
}

table td {
  column-width: 1000px;
  text-align: center;
}

@media (max-width: 500px) {
  table td {
    column-width: 100px;
  }
}

<section class="fiftyFiftySection" id="fiftyFiftySection">
  <table>
    <tr>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td>
        <img src="https://res.cloudinary.com/piersolutions/image/upload/v1637109327/5050_frfhsy.png" 
style="width:400px; height:300px;">
      </td>
      <td>
        <h4 style="color: #ffffff;">Current Estimated Payout</h4>
        <!-- <br> -->
        <img src="https://res.cloudinary.com/piersolutions/image/upload/v1637361906/dollar-sign-2_a2hsh3.png" alt="" 
style="height: 50px; width: 30px;">
        <div id="odometer" class="odometer">000000</div>
      </td>
    </tr>
  </table>
</section>

but when I go to the mobile version, it doesn't have right-sized columns. I would need them on mobile to have the picture on the left, and the counter on the right, but i can't spread them out. How can I do this?

Answer 1

You've provided fixed width to the 50-50 image. Need to give relative length. Also provide object-fit:contain on image so it won't distort:

.fiftyFiftySection {
  background-color: #000;
}

.odometer {
  font-size: 3rem;
  text-align: center;
  color: chartreuse
}

table {
  width: 95vw;
}

img {
  width: 100%;
  object-fit: contain;
}

table td {
  text-align: center;
  background-color: rgb(110, 70, 55);
}

@media (max-width: 500px) {
  table td {
    background-color: #424c5f;
    min-width: 100px;
  }
}

<section class="fiftyFiftySection" id="fiftyFiftySection">
  <table>
    <tr>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td>
        <img src="https://res.cloudinary.com/piersolutions/image/upload/v1637109327/5050_frfhsy.png">
      </td>
      <td>
        <h4 style="color: #ffffff;">Current Estimated Payout</h4>
        <!-- <br> -->
        <img src="https://res.cloudinary.com/piersolutions/image/upload/v1637361906/dollar-sign-2_a2hsh3.png" alt="" style="height: 3rem; width: 3rem;">
        <div id="odometer" class="odometer">000000</div>
      </td>
    </tr>
  </table>
</section>

---

Improvement: using table for layout is very old practice you can use new flex and grid layouts. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
For example,

.fiftyFiftySection {
  height: 300px;
  background-color: #000;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.left-side {
  width: 70%;
}

.right-side {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 100px;
  height: 100%;
  text-align: center;
  background-color: rgb(88, 87, 87);
}

.odometer {
  font-size: 3rem;
  text-align: center;
  color: chartreuse;
  overflow-wrap: break-word;
}

img {
  width: 100%;
  margin: 0 auto;
  object-fit: contain;
}

@media (max-width: 500px) {
  .right-side {
    background-color: #424c5f;
    min-width: 100px;
  }
}

<section class="fiftyFiftySection" id="fiftyFiftySection">
  <img class="left-side" src="https://res.cloudinary.com/piersolutions/image/upload/v1637109327/5050_frfhsy.png">
  <div class="right-side">
    <h4 style="color: #ffffff;">Current Estimated Payout</h4>
    <!-- <br> -->
    <img src="https://res.cloudinary.com/piersolutions/image/upload/v1637361906/dollar-sign-2_a2hsh3.png" alt="" style="height: 3rem; width: 3rem;">
    <div id="odometer" class="odometer">000000</div>
  </div>
</section>