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

  • 11/06/2019
    How to Turn Any Email Template into a Pardot Email Template

    Do you know you can turn any email template into a Pardot email template? With a couple of modifications to the HTML, you can have a fully functional Pardot email template which allows you to remove, edit and duplicate sections. In this tutorial, I will show you how to take any free, responsive email template and turn it into a Pardot email template.

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

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