How can I make the images equal width

Question

I'm trying to control the images inside the table and keep them on the same level and same width when screen size down. This will be used for email, so I would avoid global styles like td width so other elements in the email wont be effected.

The code I am using is:

@media only screen and (max-width:414px) {
      .mobile {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
      }
}

<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
  <tr>
<td style="text-align: center;">
  <h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4>
  <img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
</td>

<td style="text-align: center;">
  <h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4>
  <img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
</td>

<td style="text-align: center;">
  <h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4>
  <img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
</td>
  </tr>
</table>

[Check This](https://codepen.io/abdaburagheb/pen/vdLrNd?editors=1100) Something like this ? @TemaniAfif — , Feb 02 '18 at 22:27
yes i think better, and now they will always stay in one line ;) you may control some width to have them equal — Temani Afif, Feb 02 '18 at 22:29
This is what I'm trying to do now but it not working with me for some reason!! @TemaniAfif — , Feb 02 '18 at 22:32
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/164439/discussion-between-arsaar-and-temani-afif). — , Feb 02 '18 at 23:06

score 0 · Answer 1 · answered Feb 05 '18 at 00:56

The part that was breaking the layout was the text above the images. Try moving it above the images on its seperate row, give it a height and everything works.

 @media only screen and (max-width:414px) {
      .mobile {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
      }
 }

<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
  <tr>
    <td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4></td>
    <td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4></td>
    <td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4></td>
  </tr>
  <tr>
<td width="33%" style="text-align: center;">
  
  <img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
</td>

<td width="33%" style="text-align: center;">
  
  <img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
</td>

<td width="33%" style="text-align: center;">
  
  <img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
</td>
  </tr>
</table>

Let me know if this works for you.

score 0 · Accepted Answer · answered Feb 05 '18 at 00:58

Just apply width: 33.33%; to the table cells.

And if you want the images be aligned to the bottom, add vertical-align: bottom; to the cells and apply display: block to the images:

td {
  width: 33.33%;
  vertical-align: bottom;
}

td img {
  display: block;
}

@media only screen and (max-width:414px) {
  .mobile {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
  <tr>
    <td style="text-align: center;">
      <h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4>
      <img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
    </td>

    <td style="text-align: center;">
      <h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4>
      <img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
    </td>

    <td style="text-align: center;">
      <h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4>
      <img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
    </td>
  </tr>
</table>

How can I make the images equal width

2 Answers2