Prevent gmail from breaking width of email template.

Posted in Web Development on 06.10.2015 by @chasebadkids

Recently while coding out an e-blast I came across an issue where the layout rendered perfectly on desktop and mobile devices ( it was a responsive theme ) with any email client, except gmail on both iOS as well as Android.

Looking for a fix I found the following:

Just drop that block of code before the closing </body> tag on your site.

Google (of all companies) uses a similar snippetbut for their Analytics newsletter.

The white-space:nowrap with the dashed line creates a line about 500px across that when bumped up in size will exceed 700px causing the Gmail to not apply the font change.

The display:none style causes non-Gmail clients to hide the block (Gmail ignores display:none). When the email is viewed in say, a non-Gmail mobile client, it won’t affect responsive layout.