Today and yesterday I had nightmares... One thing is that I personally have a Windows phone. That didn't help surely. But I was reading up on iPhone settings and Android settings and there was no clear answers.

Well, Litmus had this answer which was precise for iPhone 5S, but the question becomes "what about other phones?"

How do you combine media queries for both iphone then galaxy and then other smaller resolution screens?

One of the main problem is there is no good documentation stating which phones are the most popular and what are the resolutions of those phone settings - so media querying can become more streamlined.

Here is some code I put in for my settings but I don't know if that was good enough or not. For the most part everyone told me they could see the email fine.

@media only screen and (max-width: 620px) and (min-width: 511px), only screen and (max-device-width: 620px) and (min-device-width: 511px) {

         /* @-ms-viewport { width: device-width; }*/

        table.container { width: 480px !important }

@media only screen and (max-width: 510px), only screen and (max-device-width: 510px) {

        table.container { width: 320px !important }

As you see by the first code block, Microsoft does their own thing and that was another total nightmare.

Although Windows Phone is not too popular right now Windows 8 surely is and the RT IE uses the same viewport format.

Same Litmus cost so much to use.

  • 5
    Responsive design for emails is generally a bad idea. There are way too many inconsistencies across email clients. All professional advice I've read advises using table based layouts for email templates.
    – Dom
    Jan 19, 2014 at 16:39
  • 1
    No that is not true people do it. if you are looking at the email on a phone compared to a computer or tablet you would want at least that functionality. Jan 19, 2014 at 16:58
  • 3
    Given that email clients often hardly understand CSS, this appears to be a daunting challenge. Good luck, though. The biggest challenge, IMHO, is that the media queries are for the 'page' when an email is often just part of the page. An email client wouldn't want your media queries interfering with the email client's UI if it's web based.
    – DA01
    Jan 19, 2014 at 17:42
  • 3
    This should be on the main www.stackexchange.com since it is involving code.
    – Ryan
    Jan 29, 2014 at 16:24
  • This should be migrated to here: stackoverflow.com/questions/tagged/html-email
    – John
    Jan 29, 2014 at 16:44

1 Answer 1


This is not the correct forum for this question. Hopefully someone will migrate it here.

That being said, Responsive is quite common in html email. Here is the support chart. You'll note that there is no support by Gmail and Yahoo, for this reason, I prefer a fluid percentage based layout to avoid segmentation. Most email designers use media queries heavily though, preferring to not limit their options, targeting the best case scenario with a fallback for clients with no support. Mac clients use the Webkit engine which is very robust, so it depends on your subscriber list and what devices/clients they are using.

Here is a link to some HTML Email Resources, containing a few links specifically related to responsive design and media queries.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.