Prevent gmail from breaking width of email template.

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:

          <div style="display:none; white-space:nowrap; font:15px courier; line-height:0;">
          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
          </div>

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.