CODEWITHSUNDEEP
androidcssemailgmail
Louis XIV
Louis XIV

Reputation: 2224

Autofit gmail app, Email design

I'm designing an email and I got a problem with autofit feature of the gmail app in Android and iPhone.

The email is doing well in other clients.

To prevent the auto, I've tried so far:

None of these are working.

Do you have an idea?

Upvotes: 1

Views: 1438

Answers (2)

Lidia
Lidia

Reputation: 11

I was having the same problem. I added min-width to, not only the table, but the column (td) tag as well. This seemed to overwrite Gmail's auto fit feature.

Below is an example of how I implement this. I found the answer from this forum: https://www.emailonacid.com/forum/viewthread/566/#827

<table width="590" height="900" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto; min-width:590px;">
  <tr>
    <td style="font-size: 1px; line-height: 1%; mso-line-height-rule: exactly; min-width:295px;">
      <a href="#">
        <img style="display:block;border:0px;line-height:50%;" src="example.jpg" width="295" height="900" alt="">
      </a>
    </td>
    <td style="font-size: 1px; line-height: 1%; mso-line-height-rule: exactly; min-width:295px;">
      <a href="#">
        <img style="display:block;border:0px;line-height:50%;" src="example.jpg" width="295" height="900" alt="">
      </a>
    </td>
  </tr>
</table>

As you can see, I set the table to a min-width of 590px; and each column (td) has a min-width of 295px. The same as the image size.

Upvotes: 1

safetypin
safetypin

Reputation: 13

I'm struggling against this problem at the moment, and the thing I'm planning to test next, is taking a "Mobile First" tack to designing the emails. I'm going to design the emails for width of 320-480px and use media queries to make the larger for desktop clients instead of designing for 600px wide and making it smaller. I hope that this will make the emails look great in the GMail App where media queries are not supported.

I just heard of two resources that seem pretty good, check out:

lit.ms/KISSresources and www.responsiveemailresources.com

Upvotes: 0

Related Questions