0

I have an email that is working properly in any other computer or mobile display, except the Gmail app and Gmail in laptop. 2 issues :

  • I added a @media code in the css in order for the images to be responsive when viewed on mobile (width:100%), but gmail app (tested both in a samsung phone and apple phone) seems to be ignoring it. So my images appear smaller, with the fixed width specified for big screens. Here is the result : http://screencast.com/t/nm3jyc47K. The expected result, is to have the images filling 100% of the table (almost all the screen if we exclude the spacers), and obviously centered.

  • On the Gmail laptop website, my spacers between the tables seems to be ignored, therefore inline elements are touching each other. Here is the result : http://screencast.com/t/3D7H0Fqly. The expected result is a 24px spacer in between. (PD : Don't bother about the size, I was doing some testing, the size on desktop appear properly)

Here is the HTML code of the images, 3 images and 2 spacers in between.

<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-170" style="max-width:100%;"> <tbody> <tr> <td align="center"> <a href="img-1.png" style="border:none; display:block;height:136px" width="170px" /></a> </td> </tr> <tr> <td height="20">&nbsp;</td> </tr> </tbody> </table> <!--[if mso]></td><td width="24"><![endif]--> <table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-24" style="max-width:24px;"> <tbody> <tr> <td height="1" style="font-size:1px;line-height:1px">&nbsp;</td> </tr> </tbody> </table> <!--[if mso]></td><td width="170" valign="top"><![endif]--> <table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-170" style="max-width:100%;"> <tbody> <tr> <td align="center"> <a href="img-2.png" style="border:none; display:block;height:136px" width="170px" /></a> </td> </tr> <tr> <td height="20">&nbsp;</td> </tr> </tbody> </table> <!--[if mso]></td><td width="24"><![endif]--> <table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-24" style="max-width:24px;"> <tbody> <tr> <td height="1" style="font-size:1px;line-height:1px">&nbsp;</td> </tr> </tbody> </table> <!--[if mso]></td><td width="170" valign="top"><![endif]--> <table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-170" style="max-width:100%;"> <tbody> <tr> <td align="center"> <a href="img-3.png" style="border:none; display:block;height:136px" width="170px" /></a> </td> </tr> <tr> <td height="20">&nbsp;</td> </tr> </tbody> </table>

And now the css code, in the head part of the email :

<style type="text/css"> body{width:100% !important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin:0;padding:0;background-color:#ffffff} * {-webkit-font-smoothing:antialiased} .ExternalClass * {line-height:100%} table td {border-collapse:collapse} .wlf {width:600px} .w-420 {width:420px} .w-170 {width:170px} .w-120 {width:120px} .w-24 {width:24px} .w-15 {width:15px} @media only screen and (max-width:590px) { .full-width {width:100% !important} .m-width {width:100% !important;max-width:100% !important;float:none !important} .m-block {display:block} .m-none {display:none} .m-img-ft {width:100% !important;height:auto !important;max-width:250px !important} div {box-sizing:border-box !important} } </style>

And again, I have no issue whatsoever with all the other email programs. Any idea what may be wrong in order to fixed these both issues ? (Without compromising the display in the others ?)

Thanks

Improve this question

2 Answers 2

Reset to default
1

Unfortunately you found the reason that most HTML email developers have very little hair and a slight twitch in their left eye. There is unfortunately no 'standard' for HTML for email across each email client, so you get a great diversity in not just what tags/styles are accepted, but also on what exactly each of those will do.

For your issue, the reason it seems to be ignoring it is because it is stripping your style tag out completely. (ref) Gmail app (on desktop and mobile) pretty much strips everything out of the head and Gmail web client has very limited 'hacky' support on stylesheets.

A great resource to see what is accepted by the major email clients: CampaignMonitor/CSS

Keep in mind, when you fix it on Gmail, it will likely wind up breaking it on a different email client. I would recommend getting an acid testing service like Email on Acid or Litmus, etc.

You will likely need to start designing for Gmail App first and then using CSS / 'Ghost tables' or MSO conditionals to make it work for desktop.

Sample places for Fluid Responsive templates:

http://tedgoas.github.io/Cerberus/

https://www.emailonacid.com/blog/article/email-marketing/our-gift-to-you-a-free-fluid-hybrid-email-template

http://labs.actionrocket.co/the-hybrid-coding-approach-2

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Ok I understand, this explains it all. So based on your answer, I managed to solve the issue of the problem n°2, by adding an inline css to my spacers : width:24px;. This allowed gmail to read them and apply them properly. The email is now displaying well everywhere, except for mobile gmail app. But here, I don't have any clue of how to do the trick, because it comes with a media query : @media only screen and (max-width:590px). And this one I believe there is no way on earth to apply it inline. I need the table to be :
I need the table to be : width: 100% !important; max-width: 100% !important; float: none !important And the image to be : width: 100% !important; height: auto !important; max-width: 250px !important How do email programers would usually apply it for gmail mobile app ?
I edited my answer to include places to get Fluid Responsive templates. This is really the only solution to get a responsive email in Gmail App that will continue to work on most desktop clients still.
1

Gmail doesn't support the <style> tag, so you have to inline all CSS. All other email clients support the <style> tag, so if it weren't for Gmail we'd be able to write html email like a web page. It's safest to inline CSS by hand, though there are a few CSS inlining tools that can speed things up.

Regarding spacers, something like this works across email clients:

<!-- Clear Spacer : BEGIN --> <tr> <td height="40" style="font-size: 0; line-height: 0;"> &nbsp; </td> </tr> <!-- Clear Spacer : END -->

Note: I wrote the first sample template referenced in Gortonington's answer (hello!) and can vouch that all CSS and spacers within that repo work in Gmail / Gmail app.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.