Media Queries in HTML Email: Cover all your bases

This post is pretty old and probably no longer relevant. I’m keeping it online for posterity but you no longer need to bother with the techniques listed here. I no longer use max-device-width or min-device-width at all in my media queries, relying solely on max-width and min-width.

Open Signal's visualisation of different device screen sizes — Android on the left, Apple on the right
Open Signal’s visualisation of different device sizes — Android on the left, Apple on the right

Update: Be sure to check the comments for further discussion where Lucas has suggested sticking with max-device-width alone, but pulling the media queries into the body of the email. This does also seem to fix the problem. Read the conversation for more.

These days it’s possible to hold a smartphone in your hand with a higher screen resolution than a computer. This can pose a small issue when using media queries since there are a few devices that can fit in your hand, but actually have way more pixels than your mobile design width.

What I’ve been using

In my experience up to now, it was best to use the following media query when coding HTML email, using 500px as an example*:

(I use screen instead of all to prevent any possible long-shot issues if an email is printed. It is potentially irrational.)

The reason to use max-device-width is because our old friend, on IE9, displays the mobile version of your email if you only use max-width (Such an amazing feature!).

*It’s a good idea to use max-width during development, so that you can easily resize your browser to preview the responsive behaviour.

Great. So what’s changed?

Well, now with all these new giant phones, they have a max-device-width of much larger — the HTC One, for example, has a physical screen resolution of 1920 x 1080. They ‘think’ their width is ~320px which means max-width would work, but we can’t because of the bug mentioned above.

How to fix it? Easy! Just double up

The best way to fix this is to double up on your media query, and cover everything with a max-width of 550px, and a max-device-width of 550px.

I was concerned that would still render the CSS contained in the media query because max-width is still there as an option, but it doesn’t. Thankfully, our problem is solved!

PS: This all originates from a bug I had with an HTC One displaying the desktop version of an email when using max-device-width. While plenty of smartphones have happily obeyed the max-device-width rule when they have physical pixel widths higher than their maximum display widths (the iPhone4+ displays at 320px wide when it actually has 640 physical pixels across), for some reason I haven’t seen this problem until testing with HD devices. Pixel density and media queries makes me go a bit woolly between the ears at times, so my assumption is that the HTC One ignored max-device-width because it has 1080 pixels to play with, but I could be wrong. If you know more, please jump in the comments!

Published by

Nicole Merlin

I'm an HTML email designer and developer from Melbourne, Australia. I love email, design, typography, calligraphy and curling up with a book.

  • Fabrizio Calderan

    Since the comma between mediaqueries behaves like a logical “or” and not like an “and” – for the sake of clarity – I think the statement before the last snippet could be rephrased with “or” instead of “and”. Anyway thanks for sharing 🙂

  • inorganik

    Then again if you just use “all”, it solves this problem. As for printing, I’d say the chances of an email being printed from a mobile device are slim. If you do print it from a mobile device, this is just a guess but wouldn’t the width adjust to size of page?

  • True! As I said, it’s quite irrational, but I guess I figure if is reading media queries, what if someone prints from and they end up with the mobile version being printed? It would definitely not be the end of the world, but that’s my reasoning behind it. Happy to be challenged on this.

    Do you mean that using @media all and (max-device-width) on its own should stop the bug from occurring at all?

  • Good point! I totally see what you mean.

    I guess the way I am speaking, in that sentence, is about it solving the problem with both, hence the use of ‘and’ rather than ‘or’.

    So at the point of executing, it’s looking for either/or, but from the perspective of the bug fix, it’s going to apply the right CSS to one scenario AND the other scenario. But I totally acknowledge that the code in itself is not saying that, you are definitely right there.

  • inorganik

    You are definitely right about on ie9 – I think I skimmed over the article too fast. But about printing: depending on the browser/client you’re printing from, it re-evaluates the media query for the post-script file sent to the printer. But even given that I think you’re right to use “screen”. Nice article. Did you use Litmus to find that on ie9 bug?

  • I found it using Email on Acid. Quite an annoying bug… Microsoft is definitely our biggest nemesis!

  • Pingback: Responsive Design Weekly #74()

  • James

    I have tested this and it doesn’t seem to work. When I ‘double up’ I still get the problem of in IE9 displaying the mobile version instead of the desktop. It still does that weird thing were if you resize the browser window slightly it changes to the desktop version.

    I have multiple break-points at:

    only screen and (max-width: 760px),
    (min-device-width: 768px) and (max-device-width: 1024px) {}

    @media screen and (max-device-width: 580px), screen and (max-width: 580px) {}

    @media screen and (max-device-width: 480px), screen and (max-width: 480px) {}

    @media screen and (max-device-width: 380px), screen and (max-width: 380px) {}

    Any ideas why it is not working?

  • Hi James,

    Thanks for sharing! I actually added this trick to someone else’s template yesterday and it didn’t work either.. they also had multiple breakpoints. Clearly this requires more investigation as to why it doesn’t seem to work with more than one.

    Have you been testing on a high res device like an HTC One or a Galaxy? Be interested to know if you’re seeing the mobile version okay when you use max-device-width.

  • Also, it could be an issue with using max-device-width instead of min-device width and the overriding from mobile first. I will check it out.

  • Tahsin

    Not sure if this has been asked before but were you able to get any responsive emails looking right on web email client such as yahoo mail app? I pretty much can get my responsive perfect in outlook, iphone email and android email but the yahoo app I just cant get it to work at all and I noticed Zurb free email templates seems to work on yahoo but looks pretty bad on Outlook email client as they are using divs in some cases.

  • Hey Tahsin, do you just mean the web client? Or the mobile app? I never have any problems with the web client. The mobile app doesn’t seem to render media queries anytime I have tested it out.

    Avoid those Zurb templates, they don’t work in Outlook which basically renders them useless.

  • Tahsin

    Mobile app sorry. Its kinda weird that Zurb templates work on yahoo mail apps and their coding style is something like not at all the best practice I am aware of in email coding as in using divs and classes and no inline style at all.

    I also noticed monster newsletter renders out well also in yahoo. So its kinda weird how they managed to get the media querie to work on ymail app since ymail and gmail arent suppose to.

    Great site by the way and really enjoyed reading your articles.

  • Hi James,

    I ran some more tests today on my own templates with multiple breakpoints and this fix DID work as planned.

    This doesn’t really bring me any further towards knowing why it did NOT work in your case, or in the case of the other template, but it could have something to do with this line:

    @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)

    Which doesn’t look right to me. If you are going to have specific styles for everything from 760px and 768px up to 1024px, they might as well be your default styles that you then overwrite with the media queries below it. I am also not an expert in the syntax, but it doesn’t look like the right way to create a media query that will work as expected… perhaps someone else with more knowledge may be able to chime in!

    Good luck.

  • Have you ever got media queries working in the Yahoo mobile app? Is this on Android or iOS? iOS has never given me any love but I confess I haven’t dug into it much on Android.

    What’s the monster newsletter? I am in Australia so perhaps don’t know. Are they that career/jobs company? I’ll sign up to their newsletter to see 🙂

    Yeah the Zurb templates are really weird; they sound so exciting but then it turns out they are actually pretty fail.

    Thanks for the kind words 🙂

  • Tahsin

    On android. I have a yahoo email account and i am subscribed to the job website thing and noticed their newsletter are responsive and works well on yahoo. Problem is I cant get the source code as they dont have the view web version and view the source code from yahoo is way too messy. I did change my email add to my outlook desktop one so maybe their next newsletter I may be able to grab the code and see whats so special but would be great if you can look into it and do a review of it as it would help others I am sure 🙂


  • Seth Wieder

    Are you using a linked stylesheet to include blocks of code for your css @media queries?

    I was under the impression we still had to use inline CSS to render to most mail browsers… Is this no longer the case?

  • Jimbo

    I’d be interested to learn if the queries above work on the Samsung S3 (and other argumentative types) in portrait…

  • Jimbo

    What meta viewport are you using in your responsive emails?

  • Hi Jimbo, generally this: meta name=”viewport” content=”width=device-width, initial-scale=1.0″

    I know there are some issues with BlackBerry and the viewport tag.. I’ve actually found it to be quite hit and miss, sometimes it shows a blank screen, sometimes not. Very weird.

  • I just got access to an S3 so I’ll be checking it out! The HTC One sure is argumentative enough in portrait.

  • Lucas

    I think I’ve found a solution, but just maybe.

    Instead of using the which contains the media queries in the section, I placed it at the end of the section.

    Everywhere I looked it said that this should not be done because of HTML standards and watnot, but this seemed to completely eliminate this issue with outlook in IE9 and allowed the e-mail to keep its mobile version with the max-width only.

    It works everywhere I tested (, Gmail, Outlook 2003/2007/2010/2011/2013, Yahoo, Lotus, Iphones and Androids – some of this tests were made with Litmus, btw).

    Could anybody confirm if this works for them as well? I promise I’ll keep my fingers crossed for you tests to succeed! Thanks! (Posted this in E-mail on Acid as well to see if anyone can also test this).

  • Pingback: How Nonprofits Can "Go Mobile" On A Budget | #fundchat()

  • James

    Hi Nicole,

    I finally got this working for a while but now I seem to have a very weird issue:

    When an email is opened in in IE9 the first time the email is opened it displays the desktop version correctly. But in subsequent opens (if you go back to the Inbox and then open it again) the mobile version appears and if you resize the browser window even in the slightest it automatically changes to displaying the desktop version.

    Has anyone else experienced this? I am confused as to how it works the first time and then displays the wrong version after that???

    I tested emails in all other combinations of browsers and email clients and had no problems. It was just in IE9.


  • Lucas Mainardi

    Hello James,

    In the comments bellow I posted a possible solution to this issue in

    The problem seems to be the area in which the email is loaded. Apparently, the area starts out in a small size and is resized a few seconds later, but in that time the media queries fire up and display the mobile version. This is because the media queries are read first in the hierarchy of the code (they’re at the head section) and the HTML email is read second.

    The solution I found is to place the style section which contains the media queries after the HTML e-mail, specifically right above the closing body tag.

    I tried this out in Litmus and all seemed to work just fine across the board (no other browsers/mobile devices/e-mail servers seem to be affected negatively, displaying the exact same version of the email with the styles in the head section).

    This allowed me to use the “max-width” media queries as a solution for all mobile versions without the need of the “max-device-width” or the double-up solution described here (which really didn’t work to eliminate the issue for me).

    I need to inform you that I found no documentation supporting this other than my personal experience with the issue. I wish there was more people trying it out so we could know for sure, but it has been working for me with no issues up until now.

    Hope this helps.

    All best.

  • Hi Lucas, This is really interesting. I will try this out and see what happens!

  • Thanks again for sharing your solution. Like I said I am definitely going to give it a try and we’ll see what happens.

    I hate you!

  • Ok, I tried it and it definitely does work across all my tests in Litmus and Email on Acid.. no negative effects to Android or iPhone in real tests.. haven’t checked on a PC with IE in actual though. All in all, seems like a good solution! Thanks Lucas!

  • James

    I tried it and it is now showing the mobile version in in IE9 on the first open (rather than the second)!! As soon as you start to resize the browser window the desktop version appears as before.

    What I don’t understand is I have tested the code of other companies emails (Lufthansa etc.) and they are using:

    @media only screen and (max-width: 580px) {}

    But don’t seem to experience the same problem in in IE9.

    The other thing that is puzzling me is how the correct desktop version displays on the first open but on no subsequent one.

    That is mental!!!!

    I am considering a new career if I can’t get this working soon.

  • James

    I tried it in Litmus and it does look ok in in IE9. But that is probably because I have been experiencing the correct desktop display on the first open. It is the subsequent opens that are showing the mobile version. Is anyone else experiencing this??

  • I have honestly been thinking the same thing the past few days as I’ve been fighting with the Gmail app for Android and creating a hybrid fluid/responsive layout. I know how you feel.

    Anyway — that is so annoying! I have also had the suspicion before that something else may also be interfering with the issue. Perhaps you could strip down the Lufthansa email and test that, then slowly add in your content? Sometimes I do that.

  • You could perhaps take solace in the fact that people are probably only going to open the email once, too. Not a huge help, I know, but still it’s true.

  • Lucas Mainardi

    Hello James,

    I experienced the exact same thing, but it was when the media queries were in the head section.

    After putting them in the end of the body section, I opened the e-mail with multiple times and it works everytime. Could you post the media queries of the email that is giving you trouble so we can take a look?

    I completely understand the overwhelming feeling of hatred toward some email readers (I’m looking at you, and your sidekick, IE).

  • Pingback: Creating a Simple Responsive HTML Email | Webdesigntuts+()

  • Pingback: Creating a Simple Responsive HTML Email | Lanka enews()

  • Pingback: Creating a Simple Responsive HTML Email()

  • Pingback: Creating a Simple Responsive HTML Email | Directory Net()

  • Christian Matthew

    Hi Nicole… Great ariticle.

    I am having a problem with my page rendering multiple media queries… is this possible in HTML email.

  • Pingback: Creating a Simple Responsive HTML Email | Tutorial Store()

  • Hi Christian, thanks! Yes it is possible, where are they being rendered? Media queries often get rendered in Yahoo! Mail because it will read them. You can read more at Email on Acid

  • alex

    I don’t want to advert this but it could help some people just entering the responsive mail-theme…. 🙂
    also offers an paste your code – and get it inlined back.
    just found this blog here searching for an outlook-@media fix and thought maybe could be useful.

  • Pingback: CENT Technology | Deliver Opportunities()

  • becksd

    Hi, i have tried this in an email creative and it has not worked.

    is the code i have put in. iphone’s seem to be fine but android phones it doesn’t seem lt make a difference to.
    Am i missing something? Our email client cannot support CSS coding so trying to reslove it other ways.

  • Hey there! That code should read as:

    (max-device-width: 500px)

    Make sure you have the “px” in there, and make sure there are no quotation marks. If you keep having trouble, perhaps share a link to your full code so I can have a look!

  • Katie

    Hey, I’m having an issue with the yahoo web client turning it into the mobile version. All clients are fine, just yahoo. Anyone know why this would be?

  • Stefano D’Avascio

    Hi, I’m sorry but I’m a noob in email design.
    I’d like to know how to embed the style in an email’s html.
    Until now I write it inline because when I send the email doesn’t read , but I can’t use media-queries.

    Can You help me?

  • Travis

    In the of your file, Media queries and styles go in here

  • Travis

    Sorry in the

  • Hey Travis, thanks for answering that! Yep Stefano, if you want to include media queries, put them inside a style tag in the head of your document. It will get ignored by email clients that can’t read them, but it will be read by mobile apps that support them.

  • Pingback: Creating a Simple Responsive HTML Email | CLOUD FRENZY()

  • dapmg
  • popopop


  • abhishek

    I still get the problem of gmail app displaying the mobile version instead of the desktop. any one plz help me

  • Hi abhiskek, that sounds like desired behaviour? 🙂 People try very hard to get that to happen. Can you share your code?

  • Mark Wilston

    I am a email template designer, I have created some responsive email templates. They look great in a number of email clients but look terrible in Outlook 2007 and Outlook 2010. Checking the worth website :

  • Pingback: Google()

  • Pingback: internet advertiser()

  • Pingback: Free online music streaming()

  • Pingback: shed windows and doors()

  • Pingback: g-spot stimulator()

  • Pingback: pop over to this website()

  • Pingback: free slot download()

  • Pingback: a fantastic read()

  • Pingback: Continued()

  • Pingback: click to read()

  • Pingback: free slots bonus()

  • Pingback: best site()

  • Pingback: curtain singapore()

  • Pingback: radio controlled airplane videos()

  • Pingback: Silver Bullet Vibrator()

  • Pingback: skin care devices()

  • Pingback: таблица умножения на время онлайн()

  • Pingback: coffee gardens()

  • Pingback: mountain coffee()

  • Pingback: flavored coffee at mcdonalds()

  • Pingback: music lessons hollywood()

  • Pingback: Mac data recovery()

  • Pingback: samsung galaxy s6 reviews()

  • Pingback: flavored coffee beans()

  • Pingback: stephen king books()

  • Pingback: polycarbonate skateboard deck()

  • Pingback: trend windows and doors()

  • Pingback: Go Here()

  • Pingback: blog here()

  • Pingback: internet()

  • Pingback: el cajon dentist in emergency()

  • Pingback: jeld-wen windows & doors()

  • Pingback: m88()

  • Pingback: Gaspreis()

  • Pingback: activision acquiring king()

  • Pingback: Runescape private server()

  • Pingback: samsung repair parts()

  • Pingback: home page()

  • Pingback: m88()

  • Pingback: deutsch russische tamada()

  • Pingback: Blog Berichte in Berlin schreiben()

  • Pingback: przedszkole warszawa()

  • Pingback: how to increase likes()

  • Pingback: hog trapping secrets()

  • Pingback: Package Forwarding()

  • Pingback: endtime news headlines()

  • Pingback: propane fire pit table()

  • Pingback: background check()

  • Pingback: جامعة الفلاح()

  • Pingback: live your dream()

  • Pingback: have a peek here()

  • Pingback: best work from home jobs 2016()

  • Pingback: top work from home companies()

  • Pingback: First Aid Training Online()

  • Pingback: bee expert service()

  • Pingback: coffee makers()

  • Pingback: coffee makers()

  • Pingback: sick()

  • Pingback: cloupor mini plus box mod()

  • Pingback: M88()

  • Pingback: kitchen remodeler springfield()

  • Pingback: Clean()

  • Pingback: asian pussy movies()

  • Pingback: dom aukcyjny()

  • Pingback: custom()

  • Pingback: future technology predictions()

  • Pingback: WiYnE()

  • Pingback: Concord CA ATT()

  • Pingback: her explanation()

  • Pingback: games()

  • Pingback: watch nfl games()

  • Pingback: sale meeting verona()

  • Pingback: lamborghini rental miami()

  • Pingback: classifieds()

  • Pingback: Video footage()

  • Pingback: flavored coffee()

  • Pingback: Find an apartment in Shanghai()

  • Pingback: SAI Superior Auto Institute Review()

  • Pingback: facebook PDR training()

  • Pingback: classic coffee()

  • Pingback: classic coffee()

  • Pingback: spring coffee()

  • Pingback: coffee news()

  • Pingback: coffee cake()

  • Pingback: hawaii coffee company()

  • Pingback: breakfast coffee()

  • Banti Mathur

    Hi Guess,
    I make responsive newsletter for a client. newsletter proper working in iOS device but android device is not working if any idea let me know
    thank you

  • Banti Mathur

    please reply me asap

  • Pingback: kona coffee()

  • Pingback: coffee beans()

  • Pingback: peaberry coffee beans sale()

  • Pingback: slot game free download()

  • Pingback: Same Day Delivery Service.()

  • Pingback: coffee classics()

  • Pingback: korean fashion dropship()

  • Pingback: best electric snow shovel()

  • Pingback: classic coffee()

  • Pingback: from this source()

  • Pingback: flavored coffee()

  • Pingback: sohbet hattı()

  • Pingback: telefon sohbet()

  • Pingback: sohbet numaraları()

  • Pingback: asian pornstars videos()

  • Pingback: make a man love you again()

  • Pingback: his explanation()

  • Pingback: best coffee flavors()

  • Pingback: coffee flavors list()

  • Pingback: Revshare earning()

  • Pingback: Air condition()

  • Pingback: Tennessee Rye()

  • Pingback: luxury car rentals miami beach()

  • Pingback: Ειδήσεις()

  • Pingback: Laundry Soap Fundraiser()

  • Pingback: Generic Viagra()

  • Pingback: Generic Viagra()

  • Pingback: Stegplatten()

  • Pingback: Submit directory link()

  • Pingback: dentist 24 hours()

  • Pingback: wide area network()

  • Pingback: check here()

  • Pingback: great site()

  • Pingback: spring coffee flavors()

  • Pingback: pdr training()

  • Pingback: paintless dent repair training()

  • Pingback: best rate in lima()

  • Pingback: fantasy football()

  • Pingback: russischer dj hochzeit()

  • Pingback: Responsive | Pearltrees()