Menu icon Foundation
Ink Header Image Not Resizing

I'm playing around with Ink for our responsive emails and when I resize the window, the header image (600px) isn't adjusting to smaller sizes. Any ideas why it wouldn't or is there anything special I need to do so it does resize? I'm probably doing something wrong, but any help would be appreciated!

<table class="twelve columns">
<tr>
  <td class="wrapper last">

    <img class="centered" src="img/Template_Header.jpg" style="max-width: 100%; height: auto;" />

  </td>
  <td class="expander"></td>
</tr>
</table>

inkemailimage resizing

I'm playing around with Ink for our responsive emails and when I resize the window, the header image (600px) isn't adjusting to smaller sizes. Any ideas why it wouldn't or is there anything special I need to do so it does resize? I'm probably doing something wrong, but any help would be appreciated!

<table class="twelve columns">
<tr>
  <td class="wrapper last">

    <img class="centered" src="img/Template_Header.jpg" style="max-width: 100%; height: auto;" />

  </td>
  <td class="expander"></td>
</tr>
</table>
Rafi Benkual over 4 years ago

I think the container is already width: 100% when < 600px. You need to apply a specific width to the image like so:

<table class="twelve columns">
   <tr>
       <td class="text-pad image">
           <img width="600" height="302" vspace="10" src="images/leadbydesign600px.jpg">
       </td>
       <td class="expander"></td>
    </tr>
</table>

Jordan Bommelje over 4 years ago

The container is actually set to 600px. If I change it to 100%, it does the same thing with the image set to 600px. Any other ideas?

Jordan Bommelje over 4 years ago

Actually, my body was set to 600px which was making it wider. After changing it to 100%, it's working! Now I have a table with and image on top of content. Mobile flows content to the right. If I add text-pad, it looks good in mobile, but on desktop, it adds the padding and doesn't look good. Can I do the text pad for that table only on mobile?