How to Stop The Gmail Android App From Breaking Your Responsive Email

In:

The Gmail app for Android has poor support for CSS and doesn’t support media queries. This can result in your responsive email breaking in the Gmail app for Android. Here is a quick fix you can put in place to force Gmail for Android to display the full (desktop) version of the email.

Preview

without the fix

without the fix

with the fix

with the fix

The Code

Place this HTML code right before the closing tag in your email.

Add this to the existing media query within your email.

Your media query should look something like this:

Questions?

Email me, send me a tweet @jennamolby, or leave a comment

Related Posts

  • 24/05/2017
    8 Tips for Creating Marketo 2.0 Email Templates From Scratch

    Over the past couple of months, I have been creating email templates using the new(ish) email template syntax in Marketo and I’ve learned a couple tricks along the way. To save you from some headaches, here are 8 tips that I’ve learned from creating Marketo 2.0 email templates from scratch.






  • 03/10/2016
    How to Create Marketo 2.0 Email Templates

    The new Marketo email editor allows for more customizations than ever before. You now have the ability to create modules, color pickers, number variables and more, but your email templates need to follow the email template 2.0 syntax in order to take advantage of these features. In this tutorial, I’ll show you how to create a Marketo 2.0 friendly template and how to turn your existing 1.0 email templates to 2.0 email templates.






  • 06/07/2016
    10 Things You Should Know About The New Marketo Email Editor

    Marketo recently rolled out a new email editor, also referred to as the Email Editor 2.0, for their Spring ’16 release. This highly anticipated feature allows for a better experience when editing and creating emails within Marketo. However, there are a couple things you should know before enabling the new email editor. Here are 10 things you should know about the new Marketo email editor.






10 comment(s)
  • Konstantine Gegeshidze

    26/09/2016 at 3:40 am
    Reply

    It was indeed great hack till this 14th of September, Time to Rock new killing article about the CSS media quires support, let me know when you wrote blog about that.

  • Chris

    14/09/2016 at 6:01 pm
    Reply

    This is genius. Thank you so much!

  • Wesley

    25/05/2016 at 2:25 am
    Reply

    Thank you very much! I have been looking for this "hack" for a long time.

  • Jenna Molby

    07/03/2016 at 11:12 am
    Reply

    Hi Anton, The Gmail App on Android doesn't allow media queries. Instead, Gmail will automatically re-size the message so that the email shrinks to fit the screen dimensions of the device. The issue is how the Gmail App renders the TABLE tags. Any table width attributes (in pixels or percentage widths) are now ignored, which causes the size of the table to be controlled by elements within the cells (text and images). Adding a transparent spacer image with a fixed width will force the table to keep its size and prevent the collapsing of the content.

  • Anton

    07/03/2016 at 5:49 am
    Reply

    Could you elaborate a bit about why this works, and what is happening? I don't really understand it. And your spacer.gif, is that just an invisible image?

Leave A Comment

Your email address will not be published. Required fields are marked *

About Me

I’m a Marketo & Pardot expert with a strong background in design and development. I specialize in email marketing, lead nurturing and CRM integrations for marketing and sales alignment. LEARN MORE

Categories
Most Commented
Popular Posts