Force Gmail App to Render Desktop Version

Thanks for this Sean!

finally someone who's not confused! :) Great answer, this should work hehe

This is it! Thanks!

Goes perfect with this: <img src="spacer.gif" height="1px" width="600px" alt="" class="mob-hide" style="max-height:1px; min-height:1px; display:block; width:600px; min-width:600px;">

Thank you! That actually worked!

Sean- where do I put this code? I'm stuck on this.

@Maggie Ellis within the main container of your email. I normally put it in the very bottom. Make sure the width values are in sync.

In your internal styles:
.gmailFix, .gmailFix img { display:none !important; } /* Gmail App layout hack, pre-media query support */

<!-- main containing table-->
<table width="600" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr><td class="gmailFix">
<img src="spacer.gif" width="600" height="1" style="display:block;width:600px;min-width:600px;min-height:1px;max-height:1px;"/>
</tr></td>
</table>

Why would you want to? They support media queries now.

It will only work on the "vanilla" versions of Gmail, which are ones that never implemented media query support. So if you include it, it will force the desktop version on these vanilla gmail app versions while being ignored by the app versions that support media queries.

Thank you so much for this! Worked like a charm!

Rasmus,

Thanks for this mate, i have been having an issue trying to get gmail app to render correctly - had already given up with it displaying the mobile version of my email, but it seems your hack has fixed it so it can render the desktop version correctly on mobile which is a good compromise here (and means getting client sign off is now possible!)...

Which confused me most. Usually get questions on how to get it working properly. Not disable it. :o

I'm a little late to this game, but just to clarify for other readers: The gmail app doesn't support responsive, this is a fix that tells the width of the column to be a certain width and stay that width. The only reason Sean has included a media query is to point out that if your email is responsive, you want the responsive version to ignore the width (for the obvious reason your email doesn't want to be 640px in mobile - 320 ideally). Basically how to tackle this situation without bugs in your responsive version)

Lastly this fix is because gmail use a viewport method and fails to acknowledge the widths especially when there is blank space.

I hope this helps anyone in future and that all my information is correct!

Gmail app doesn't work with media queries.

It just forces the layout to be 640px wide, therefore forcing the "desktop" layout. It worked for me. I coded it as the top row of my html email, changed the height to 1px, and hide it for all User Agents that support embedded CSS. For those that don't (such as Lotus Notes, which I have to support), I'm not able to discern the 1px of extra spacing at the top of my email.

<table bgcolor="#000000" align="center" cellpadding="0" cellspacing="0" border="0" class="container" style="margin-left:auto;margin-right:auto;mso-table-lspace:0;mso-table-rspace:0;">
<tr>
  <td>
    <table width="700" cellpadding="0" cellspacing="0" class="container">
    <tr>
      <td class="gmail">
        <img alt="" width="700" height="1" border="0" style="display:block;min-height:1px;max-height:1px;width:700px;min-width:700px;" src="http://image.mail.minacsmarketing.com/lib/fe9613707560077576/m/1/space.gif"/>
      </td>
    </tr>

etc etc.

What Gmail app does is not mobile-optimized view - it's basically squishing the columns to fit the width of the screen making a mess...