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

  • 06/12/2018
    Creating Pardot Email Templates: Common Questions & Answers

    Can my Pardot email be responsive? Why doesn’t my background image appear in Outlook? Can Pardot emails be drag & drop? I get asked these questions a lot from Pardot users and see them posted frequently in the Trailblazer Community. Let’s dive into these questions as well as other common Pardot email template questions.

  • 24/10/2018
    How to Create a Net Promoter Score Survey in Pardot

    Learn how to build a net promoter score (NPS) survey directly in Pardot. I will show you how to create an NPS survey that asks the recipient to give you a score from 1 – 10 using an in-email rating that directs them to a Pardot landing page to collect more information.

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

12 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

Welcome to my blog, where I share, tips, tricks, thoughts and solutions that I learn in my daily life as a sales and marketing professional.

LEARN MORE

Categories
Most Commented
Popular Posts