StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHTML email in Gmail - CSS style attribute removed
text
Body
copied!<p>I'm working on an HTML email and I am using <a href="https://github.com/mailchimp/Email-Blueprints">MailChimp's Responsive Email Templates</a> in combination with their <a href="http://beaker.mailchimp.com/inline-css">CSS inliner tool</a>. For the most part, the email looks great across the myriad of email clients, but in Gmail things are horribly misrepresented.</p> <p>If I use Gmail's "Show original" option from the drop down menu next to the reply arrow, the original HTML is different from what is actually displayed in the email client. I can confirm this by inspecting the element with the developer tools. This happens on desktop and mobile; the email client is removing inline style attributes from elements.</p> <p>It seems that one of the criteria for removing the style attribute is if the element also contains a class. Can anyone confirm this? Also, it appears to remove all style attributes from a table tag regardless. Can anyone confirm this as well?</p> <p>What are the workarounds for this?</p> <p>Screenshots of email with source in Gmail and Yahoo included below.</p> <hr> <p><strong>Screenshot of email in Gmail with source displayed via Chrome developer tools</strong></p> <p><img src="https://i.stack.imgur.com/DLLmi.jpg" alt="enter image description here"></p> <hr> <p><strong>Screenshot of email in Yahoo with source displayed via Chrome developer tools</strong></p> <p><img src="https://i.stack.imgur.com/D9uEZ.jpg" alt="enter image description here"></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload