5 Reasons Why the Mobile Version of your Email Might Not be Displaying


Responsive Design is one of the most powerful tools available to email designers today.

But it’s also one of the most confusing. Are you have trouble getting your responsive email to, well… respond? Don’t worry, it happens to lots of email designers.

Let’s take a look at some of the most common causes for media query problems and how to fix them.

#1 – Some clients don’t support media queries.

Some clients just don’t allow media queries to function. Check out the full list of clients here:

Media Query Support

EnvironmentEmail ClientMedia Queries Supported?
WebmailAOL
WebmailGmail
WebmailGoogle Apps
WebmailYahoo! Mail
WebmailOutlook.com
WebmailOffice 365
DesktopApple Mail
DesktopLotus Notes
DesktopOutlook 2000-2016
DesktopOutlook 2011 (Mac)
DesktopThunderbird
MobileiOS Mail
MobileGmail App (Android)
MobileGmail App (iOS)
Webmail (Regional)BOL
Webmail (Regional)Comcast
Webmail (Regional)Free.fr
Webmail (Regional)Freenet.de
Webmail (Regional)GMX
Webmail (Regional)La Poste
Webmail (Regional)Libero
Webmail (Regional)Mail.ru
Webmail (Regional)Nate
Webmail (Regional)Naver
Webmail (Regional)Orange.fr
Webmail (Regional)QQ
Webmail (Regional)SFR.fr
Webmail (Regional)T-Online.de
Webmail (Regional)Telstra
Webmail (Regional)Terra
Webmail (Regional)Web.de
Webmail (Regional)Yandex.ru

#2 – Your query might be improperly formed.

If you’re sure that media queries should be functional in a given client, maybe you have a different kind of problem. Check to make sure that your media query is properly formed, and that the parameters set will cause it to trigger. Let’s take a look at a sample media query:

<style>
  @media only screen and (max-width: 320px) {
     p.mobile_text {
       font-size:18px;
       font-weight: bold;
  }
</style>

This query is designed to make some text bigger and bolder on mobile devices, but as it’s written it won’t trigger properly. Simple syntax mistakes can cause your media query to fail. Can you see what’s wrong with the above example?

Here are a few other errors you should check your media query for:

  • Make sure you have curly braces around your media query and around any declaration blocks inside it
  • Make sure your selectors are functioning properly (test this by using that selector to make a new rule outside the media query)
  • Make sure that the device you’re hoping to see the media query trigger on falls within the pixel range you’ve specified (see #3)

#3 – You may be targetting the wrong width.

Max-device-width vs. Max-width Max-device-width, as in the example below, will force the query to check for the size of the device instead of the viewing pane. For instance, on a desktop machine it would check the size of the monitor and on a handheld device it would check the full size of the screen.

<style>
 @media only screen and (max-device-width: 479px) {
     ...Styles here...
 }
</style>

Max-width, on the other hand, will check the width of the viewing pane: the internet browser’s iframe, the display portion of the email client, etc. If you use this media feature, you’ll be able to see your email “respond” in a webmail client as you change the size of the browser window. You can also use device with min-width.

Min vs. Max Width When choosing between min and max width, remember:

  • Max-width will target devices of the listed width and lower.
  • Min-width will target devices of at least the listed width and wider.
  • For more on min/max width, see our blog on Media Queries Demystified.

Choosing Breakpoints
A common industry breakpoint for handheld mobile devices is 480px. (When used with max-width, this will create a “breakpoint” that triggers on devices 480px wide and smaller.) For tablets, a breakpoint near 640px should cause the query to trigger. Not sure what width to target? Check out our blog on different device widths.

#4 – You may be using the viewport metatag.

The viewport tag is very popular with responsive designers because it allows you to control the scale your page or email is displayed at. It looks about like this:

<meta  name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0," /> 

Sadly, BlackBerry will display emails with this tag as a blank, white page. You can read more on the BlackBerry viewport bug, but the bottom line is that (because of BlackBerry) we recommend avoiding this tag.

#5 – Your CSS may not be properly ordered.

Remember, when using CSS the rules that come last in the style block have precedence. For this reason, media queries which are designed to over-write the “default” desktop styles should come at the bottom of your style block. This is easy to forget about, but it’s also easy to fix.

When using multiple queries, it’s important to order your media queries properly to set up their precedence. When using max-device-width, for instance, you should have your desktop rules first, then your tablet media query (if any), and last, your handheld media query. If you’d prefer, you can set a range on your media query, like this:

<style>
 /* Put desktop styles here */ 

 @media only screen and (min-device-width: 481px) and (max-device-width: 900px) {
     /* Tablet styles here */
 }

 @media only screen and (max-device-width: 480px) {
     /* Handheld styles here */
 }
</style>

The above code uses the first media query to target devices with width 481-900px (tablets and similar devices) and the second to target devices with a width of 480px or less.

Did we miss something that has stumped you in the past? Let us know about your media query quandries in the comments down below.

6 thoughts on “5 Reasons Why the Mobile Version of your Email Might Not be Displaying”

  1. Curious if you would suggest inline CSS for desktop view and media queries only as CSS in the head? Another words, no desktop CSS in the head. I thought I had read that in a blog post.

  2. Very interested in this conversation, Geoff and Mike. Keep us posted on the gmail media query thing. I’m working on some creative work arounds of my own. I’ll let you know if I discover anything.

  3. hi there, anyone can tell me how to write inline media queries. my newsletter working fine in android gmail app but not in apple phone what’s wrong with this mac os.

    Regards,
    Harsha Ch.

Leave a Reply

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

Free Email Goodies