Email coding : Gmail and Gmail app seems to be ignoring my CSS

Question

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

Answer 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

Answer 2

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.