Force Gmail App to Render Desktop Version

SM

15

Sean McGonigal replied 2014-06-04 15:40:39

I know you mentioned min-width already, but I use a spacer with min-width set, and it works for me to get rid of Gmail app’s text zoom.

    <tr>
    <td class="mob-hide">
        <table  cellpadding="0" cellspacing="0" border="0" align="center" width="640px">
            <tr>
                <td cellpadding="0" cellspacing="0" border="0" style="background-color:#dddddd; line-height:15px;" height="15px; min-width: 640px;">
                    <img src="spacer.gif" height="15px"  width="640px" style="max-height:15px; min-height:15px; display:block; width:640px; min-width:640px;"/>
                </td>
            </tr>
        </table>
    </td>
</tr>

I threw the mob-hide class in there in case your email is responsive (it sounds that way), and you need to hide the spacer on mobile devices that support media queries.
mob-hide class would be something like…

@media only screen and (max-width:481px) {
*[class="mob-hide"] { display: none !important }
}

Hope that helps.

Reply to Sean McGonigal

MP

0

Marc Pickering replied 2014-10-17 13:31:59

Thanks for this Sean!

SM

0

Sean McGonigal replied 2014-10-20 13:27:18

No problem :)

VD

0

Vic Dinovici replied 2014-06-05 13:07:19

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

MV

0

Marco van Zomeren replied 2014-11-26 15:31:50

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;">

JB

0

Josh Blauvelt replied 2014-06-30 05:48:36

Thank you! That actually worked!

ME

0

Maggie Ellis replied 2018-04-17 17:30:06

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

JB

0

Josh Blauvelt replied 2018-04-17 18:36:35

@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 */

<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>

JG

3

Jill Gwaltney replied 2016-11-01 20:04:55

Is it still possible to force the desktop version on the android app using the spacer gif hack?

Reply to Jill Gwaltney

CW

0

Christopher Wise replied 2016-11-04 16:47:43

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

JB

0

Josh Blauvelt replied 2018-04-17 19:32:45

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.

RE

2

Rasmus Esbensen replied 2015-10-12 07:58:11

Try this:


.container {
          width:100% !important;
          min-width: 100% !important;
          height:auto !important;
}

<table width="600" border="0" cellspacing="0" cellpadding="0" class="container" style="min-width:600px;">

Reply to Rasmus Esbensen

KL

0

Kevin Litmus replied 2016-08-03 02:28:16

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

JT

0

John Twinn replied 2016-01-20 15:32:14

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!)...

JG

1

Jamie Greatorex replied 2018-09-26 16:20:56

Has anyone got an up to date hack for this?

Current versions seem to half work or not work at all!
(I still want responsive on IOS, Samsung .etc)
Thanks

Reply to Jamie Greatorex

BC

1

Benjamin Carver replied 2014-06-04 15:01:44

I'm a bit confused by this as well; doesn't gmail strip or make the use of most of the media query useless?

Reply to Benjamin Carver

NS

0

Narong Saron replied 2014-06-04 15:10:30

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

MP

0

Marc Pickering replied 2014-10-17 13:14:20

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!

VD

0

Vic Dinovici replied 2014-06-05 13:24:42

Gmail app doesn't work with media queries.

WV

0

William Visalli replied 2014-07-15 18:33:51

This is a great question I'd like to know the answer myself. I see the comment by Sean but I'm not sure how that applies. Could someone elaborate?

Reply to William Visalli

JB

1

Josh Blauvelt replied 2014-07-15 21:19:14

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.

NS

0

Narong Saron replied 2014-06-04 14:29:36

I'm a little confused by your question. Since the app is being opened on mobile devices, wouldn't you want it to render the mobile-optimized view?

Reply to Narong Saron

VD

0

Vic Dinovici replied 2014-06-05 13:23:43

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...

FU

0

Freemium User replied 2018-01-24 13:34:02

I'm having problems with the rendering on orange.fr
Desktop view is showing fine one everything except orange.fr which is showing the mobile version.
Does anybody have a fix for this

Reply to Freemium User

CH

0

Charles Hall replied 2016-12-31 16:50:09

If this MRM Meteorite account is still active, please contact me.
charles.hall@mrm-mccann.com

Reply to Charles Hall

The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

Force Gmail App to Render Desktop Version

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password