Media Queries Demystified: CSS Min-Width and Max-Width
Media queries can be used to target certain resolutions or even specific email clients and can replace or work alongside fluid hybrid design.
With the latest update to Outlook.com, all modern webmail clients now support media queries (with some caveats). We have seen a resurgence in queries and interest in how to use them, which we’ll cover here.
What are Media Queries?
A media query consists of an optional media type (all, handheld, print, TV, and so on) and any number of optional expressions that limit when the query will trigger, such as width, pixel-density or orientation. Media queries are part of CSS3 and enable developers to customize their content for different presentation mediums.
At the basic level, media queries enable an email developer to create a responsive email by detecting the width of the display. For this purpose, the most commonly used query is max-width. Any width that is less than the max-width specified, all of the CSS within the query will take effect.
How Min- and Max-Width Queries Work
How media queries function can be a bit confusing. Let’s take a look at the queries which are commonly used in email.
Max-width
Here is an example of a max-width query.
@media only screen and (max-width: 600px) {...}What this query really means, is “If [device width] is less than or equal to 600px, then do {…}”
So if the email is opened on an iPhone 5S with a screen width of 320px, the media query will trigger and all of the styles contained in { … } will take effect.
Min-width
Here is an example of a min-width query.
@media only screen and (min-width: 600px) {...}What this query really means, is “If [device width] is greater than or equal to 600px, then do {…}”
So if the email is opened on an iPhone 5S with a screen width of 320px, the media query will not trigger and the styles contained in { … } will not take effect.
Combining media query expressions
Max-width and min-width can be used together to target a specific range of screen sizes.
@media only screen and (max-width: 600px) and (min-width: 400px) {...}The query above will trigger only for screens that are 600-400px wide. This can be used to target specific devices with known widths.
Breakpoints
Most media queries are set to trigger at certain screen widths or breakpoints. Exactly what these should be set to is a matter of some debate amongst email developers.
iPhones and iPads provide us with a few easy breakpoints to start from. Coding styles for these specific clients will ensure emails look great on these screens.
Android devices, on the other hand, vary widely in screen size because there are so many different manufacturers and devices. I recommend creating two to four breakpoints, based on popular Apple devices, which will cover most devices.
- iPhone 5S is an example of a Breakpoint 1 with 320px
- iPhone 6+ is an example of a Breakpoint 2 with 414px
- iPad Mini is an example of a Breakpoint 3 with 703px
- iPad Air is an example of a Breakpoint 4 with 768px
Breakpoints 3 and 4 are optional, as most emails will look fine showing the desktop version on an iPad or large tablet. You could even get away with using just breakpoint 2, if you code your container tables to expand to 100% width (and not a set width, which may or may not match the device well).
Taking advantage of precedence
Remember, CSS rules that appear later in the embedded styles override earlier rules if both have the same specificity. This means that you can set rules for tablets by putting the Breakpoint 4 media query first, then set styles for mobile devices with a Breakpoint 2 media query.
Because the Breakpoint 2 styles come after Breakpoint 4, your mobile styles will override your tablet styles when the Breakpoint 2 query is triggered. This means that you don’t have to set min-width for any of your media queries, as long as they are arranged in the correct order.
Here is an example order:
- Desktop styles (not in a media query)
- Tablet styles (max-width: 768px)
- Mobile styles (max-width: 414px)
It is common to produce an email with just one media query and breakpoint, choosing a breakpoint that suits your content, such as an email with two columns side by side with a width of 300 pixels.
The breakpoint would be 600 pixels—the lowest width before the content in the columns would start to get squashed. At 600 pixels the columns could stack on top of one another and expand to the device width.
Coding with Media Queries
Using media queries in your emails can really help with targeting and making your emails responsive. However you normally add your CSS styles, you can insert your media queries. In the example below, with embedded CSS in the <head> of the html, you can include the media query between <style></style> tags.
STEP 1
Add a class and the CSS you would like between style tags. In this case, the class is .100pc, which is similar to those widely used on mobile to make tables and elements stretch to the full width of the device or containing table.
<style>
.100pc {
Width: 100%;
}
</style>
STEP 2
We now add the media query around the class. In this case, for devices with a max screen size of 640px.
<style>
@media screen and (max-device-width:640px), screen and (max-width:640px) {
.100pc {
Width: 100%;
}
}
</style>
STEP 3
Now we add !important (an email developer’s magic bullet). With some email clients needing inline styles, you will have to add !important after the style to ensure it over writes the inline style.
<style>
@media screen and (max-device-width:640px), screen and (max-width:640px) {
.100pc {
Width: 100%!important;
}
}
</style>
STEP 4
Add the class to the HTML element:
<table width=“640” style=“width: 640px;” role="presentation" border="0" cellpadding="0" cellspacing="0" class="100pc”>
Coding for Two Columns with Media Queries
When coding an email to be responsive using media queries, a common technique is to create tables with align = "left" and a special class to target inside the media queries. For example, a two-column section might look like this:
<table border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td style="padding:10px 0">
<table align="left" width="49%" border="0" class="deviceWidth">
<tr>
<td>
</td>
</tr>
</table>
<table align="left" width="49%" border="0" class="deviceWidth">
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>Each of the tables with 49% width can fit side by side when on desktop view. 49% is used instead of 50% because Outlook can be very picky about what fits side-by-side and what doesn’t.
You can make 50% width fit if you set all of your styles just right (no border, padding, etc.). You can make a three-column section using similar code, but use three tables set to 32% width instead.
When the responsive code kicks in, we’ll want to make these content blocks 100% width for phones so that they fill the whole screen. This can be accomplished for most phones with a single media query:
@media only screen and (max-width: 414px) {
.deviceWidth {width:280px!important; padding:0;}
.center {text-align: center!important;}
}You can continue to add media queries with special styles to cover as many different screen sizes as you’d like. You should also add code to your media queries to optimize font-size and line-height for each screen size, improving readability for your subscribers.
If you’d like to start working with a template like this, grab our “Emailology” template from our Resources section, where you get free access to all of our resources (like templates, white papers, webinars and client tips & tricks).
Other Media Queries
You can do a few other interesting things with media queries. The below uses are most relevant to email, but check out MDN for even more media query techniques.
Orientation
You can use the following media query to target device orientation. Unfortunately, this query doesn’t work well in iOS Mail.
In most versions, the landscape media query will always trigger regardless of orientation:
@media screen and (orientation: landscape) { ... }Targeting Yahoo! Mail
You can use this simple query to write styles that will trigger only in Yahoo! Mail. This can be used to address layout or rendering issues that you see only in that email client, or to include messages intended only for Yahoo! users.
@media (yahoo) { ... }Pixel-density
This media query can be used to target only devices that have a certain pixel density. Combined with WebKit, this can effectively let the email developer target only iOS devices. This can be useful when adding interactive code that is known only to work in iOS Mail:
@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }By setting specific styles for print, you can ensure your email will be easy to print as a hard copy and look great. This is especially important for coupons or tickets. You can hide useless elements, like links and buttons, and display only the part of the email that is important to print.
@media print { ... }Tracking pixel
Something else that could be useful here is adding a tracking pixel as a CSS background image. This will only load when the media query is used, so that way, if you have a printable coupon in your email, you can track the number of times it was printed:
@media print {
background-image: url(https://emailtracking.com/pixel.gif);
width: 1px!important;
height: 1px!important;
}
Using Media Queries to Target Email Clients
We can also target specific devices using media queries, and with updates, developer discoveries and documentation, more are being discovered constantly. Check out howtotarget.email for a searchable list of ways to target different devices.
Gmail on Mobile (webmail and app)
@media screen and (max-width: 480px) {
u + .body .foo {…}
}
Outlook on Android
@media (min-resolution: 1dpi) {
body[data-outlook-cycle] .foo {…}
}
Yahoo! Mail
@media screen yahoo{ … }
WebKit email clients with pixel-density
This media query can be used to target only devices that have a certain pixel density. Combined with WebKit, this can effectively let the email developer target any WebKit devices. This can be useful when adding interactive code that is known only to work in certain clients:
@media screen and (-webkit-min-device-pixel-ratio: 0) { … }
Email Client Media Query Quirks
Windows phones 7.5 and higher
Yes, Windows announced that there will be no new Windows phones developed and support will be ending soon. However, if you have users opening emails on Windows phones, you need to include the below meta tag in the <head> of your email within mso conditional statements to get any CSS3 and media queries to work.
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
Outlook.com
As highlighted by Remi Parmentier, with the new updates to Outlook.com and the Outlook apps that are following suit, it seems there is now support for one media query.
Using the above example, setting one breakpoint with a media query to distinguish between larger (desktop) screens and mobile sizes would bring responsive email support to Outlook.
Gmail
Gmail supports media queries, but is especially strict with CSS and one misplaced curly bracket can render the whole lot being ignored. Using a CSS validator such as the official w3.org validator will pick up on any obvious mistakes.
Outlook Desktop
Outlook on desktop doesn’t support media queries, but we can use this to our advantage. By wrapping any @font-face for linking web fonts in a media query, they will be ignored and stop Outlook rendering fonts as Times New Roman:
@media {@font-face…}
Media Query Support Chart
Media queries have fairly wide support now that Gmail has enabled classes, IDs and embedded styles. Check out the support chart below:
| Environment | Email Client | Support |
|---|---|---|
| Webmail | AOL | ✔ |
| Webmail | Gmail | ✔ |
| Webmail | Google Apps | ✔ |
| Webmail | Yahoo! Mail | ✔ |
| Webmail | Outlook.com | ✔ |
| Webmail | Office 365 | ✔ |
| Desktop | Apple Mail | ✔ |
| Desktop | Lotus Notes | ✕ |
| Desktop | Outlook 2000-2016 | ✕ |
| Desktop | Outlook 2011 (Mac) | ✔ |
| Desktop | Thunderbird | ✔ |
| Mobile | iOS Mail | ✔ |
| Mobile | Gmail App (Android) | ✔ |
| Mobile | Gmail 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) | ✔ | |
| Webmail (Regional) | SFR.fr | ✔ |
| Webmail (Regional) | T-Online.de | ✕ |
| Webmail (Regional) | Telstra | ✕ |
| Webmail (Regional) | Terra | ✕ |
| Webmail (Regional) | Web.de | ✔ |
| Webmail (Regional) | Yandex.ru | ✕ |
Media queries can be confusing and take trial and error to perfect. That’s why we offer you seven days free with Email on Acid, so you can ensure your media queries, and your emails, are perfect before you hit send.
Author: Jay Oram
Jay Oram is part of the design and code solutions team at the email specialist agency, ActionRocket. In his role at ActionRocket, Jay is usually experimenting with new code for emails or finding that elusive rendering fix. See more articles from Jay at emaildesignreview.com or find him on Twitter at @emailjay_.
Author: Jay Oram
Jay Oram is part of the design and code solutions team at the email specialist agency, ActionRocket. In his role at ActionRocket, Jay is usually experimenting with new code for emails or finding that elusive rendering fix. See more articles from Jay at emaildesignreview.com or find him on Twitter at @emailjay_.
I think the last line of your min-width example should say this:
“It becomes true if you pass any value equal to or greater than 330 as shown below:”
Brad,
That line is actually correct. The numbers 320, 310 and 300 are larger and in red because they triggered the media query. The media query triggers based on screen width, which is 320.
I think what makes this so confusing is that there are always 2 numbers in the condition: The returned device width and the min/max value you are passing. So you always have to step back and ask, what is the actual device width that is being returned?
I guess it’s just slightly confusing since we’re not privy to what styles are actually being applied in the examples. But given the media query in the min-width example, a screen width of 320 will mean any styles in there will be ignored. So, it won’t be true.
What am I missing here?
Brad,
We have just updated this article to include the following explanation for our test samples: The red text is returning ‘true’, the black text is returning ‘false’.
When I first looked at those results, I was dumbfounded because it actually works opposite of what you’d expect, hence the reason for this article.
Please read again and let us know if we can provide any further clarification. To our knowledge, the facts stated in this post are accurate.
thanx for ur help…
Hi Michelle & Geoff,
I thought there was a typo in the first example too (as did Brad)…thus confirming your point that this is a confusing topic.
After reading this article a couple times…and thinking I finally get it…I think the confusion is the use of the word “pass” vs. “specified”. Perhaps revising the example explanation by adding color:
It would become true if youspecify/pass a value equal to or less than 320 as shown below:
…or something similar.
Thanks for the great articles!
Hold up, I’m STILL confused about the examples.
First, you say:
“@media only screen and (min-width: 330px) {…}
Here’s what that actually means:
If [device width] is greater than or equal to [specified #], then do {…}”
So if the actual “device width” is 320px this condition will return false.”
Then you go on to say the opposite:
“It would become true if you pass any value equal to or less than 320 as shown below:
=<300
=<310
=<320 all equal true
=<330
=<340
=<350 all equal false"
Even though the minimum width to create the "true" state is 330px. Therefore, how can anything less than 330px trigger true? The example should say the opposite: =<330, =<340, =<350 are all true, and the previous ones are actually false.
No?
ProducerTina, Yeah it’s so confusing, I totally agree. I would not believe this if I didn’t see it either.
The first part of the equation is the width that is being returned from the device, the second is your min-width value.
To use your sample above, let’s fill in the variables:
If [device width] is greater than or equal to [330px]
is the same as:
If 320 >= 330
What I should do is change this:
“It would become true if you pass any value equal to or less than 320 as shown below:”
to this:
“It would become true if you use a min-width value equal to or less than 320 as shown below:”
Here is what we passed during our min-width testing:
@media screen and (min-width: 300px) {
#sizeA { Color: Red; Font-Size: 200%; }
}
@media screen and (min-width: 310px) {
#sizeB { Color: Red; Font-Size: 200%; }
}
@media screen and (min-width: 320px) {
#sizeC { Color: Red; Font-Size: 200%; }
}
@media screen and (min-width: 330px) {
#sizeD { Color: Red; Font-Size: 200%; }
}
@media screen and (min-width: 340px) {
#sizeE { Color: Red; Font-Size: 200%; }
}
The iPhone returns a width of 320.
300, 310, 320 all return true on the iPhone
330, 340 return false.
What you guys are saying is true, but got the wording to confusing. The specified # is being compare with the device width as the reference. Therefore we are comparing the specified # in the media query against the actual device width.
@media screen and (min-width: 300px) {
#sizeA { Color: Red; Font-Size: 200%; }}
means “Is the [specified # –> 300] less the [device width–>320]. Notice how I switch specified # and device width. In your example you’re comparing the device width to the media query and that causes the confusion. You should change it to
“If [specified #] is less than [device width], then do {…}”.
This make things more clear because if you think in terms of a number line where 0 is the center and how big or small a number is determine how far it is from 0, then make the device width our 0.
REMEMBER IT NOT HOW BIG THE DEVICE WIDTH IS COMPARE TO THE NUMBER THAT WE SPECIFIED, IT IS HOW BIG THE NUMBER THAT WE SPECIFIED IS COMPARE TO THE DEVICE WIDTH.
I hope this make things more clear.
“@media only screen and (min-width: 330px) {…}
Here’s what that actually means:
If [device width] is greater than or equal to [specified #], then do {…}”
So if the actual “device width” is 320px this condition will return false.”
Then you go on to say the opposite:
“It would become true if you pass any value equal to or less than 320 as shown below:
=<300
=<310
=<320 all equal true
=<330
=<340
=<350 all equal false"
Even though the minimum width to create the "true" state is 330px. Therefore, how can anything less than 330px trigger true? The example should say the opposite: =<330, =<340, =<350 are all true, and the previous ones are actually false.
No?
Vikram,
In the example image, each of those numbers, like “(=<330)" and so on, is tied to a different media query. As you can see, (=<330) is black, and therefore did not register as "true." This is because 320 (device width) is not equal to or greater than 330 (set number). If you look at (=<320), you'll see that it is true. This is because 320 (device width) is equal to than 320 (set number).
The examples were generated on actual devices using those media queries. We are just doing our best to explain how it works 😉
ok can anyone convert my website into responsive design
http://netdham.com
I used
@media (min-width: #) { code }
@media (max-width:#) { code }
where the # for max is 1 less than the number for min, and then I used another 2 queries right after the first two where again the number for max is 1 less than the number for min.. Also my queries are ordered so that the small #’s are near the head of the css document and the larger #’s are near the foot of it… and this is working great for me… now if I can get my custom javascript drop-down menu to function in my cms I’d be really happy
Hi Everybody
i am new in responsive web, Self learning to see tutorials and download demo and doing practice. i need some help to understand the css media query . i am confuse after read this article. Nobody doing my help in my country. it a request if you Guys please help me to understand the logic of media query using min and max width pleaseee
Thank you for your article.
I am struggling through changing my website to be more responsive and it helped me figure out media queries better.
Nice Info.. Thanks for sharing.
This is what I searched long time on the internet/
I’ve gotta admit that I was kinda confused upon reading this article, because of the chosen wording/way of explanation. I however found this video which seems to explain it quite nicely.
https://www.youtube.com/watch?v=Gi3INcPOvo8
Disclaimer: It is NOT my video and I have no relations with the author what so ever.
Thanks I kept confusing about this
When I use the following:
@media screen and (min-width: 577px;) and (max-width:980px) {
input#intextbox { width: 50%; }
}
it’s not working. Seems I only get a response if I use one or the other.
John, that should trigger on screens 578-979px wide.
Thanx for sharing 🙂
what is min-width: for iphone 6
srp, I think the info you’re looking for is here: https://www.emailonacid.com/blog/article/industry-news/adapt_your_media_queries_for_apples_new_iphone_6_and_6
Hope that helps!
Hi, We have an old email newslettter template which has class=”mobile” and class=”desktop” for content to show hide accordingly. On yahoo mail (web) it showed both desktop and mobile sections, so i added media width 1200 and block/none accordingly and had to put this all the way near </body> tag. if its in the head then Gmail app on phones showed the desktop layout. But still yahoo email app is showing desktop layout and not the mobile layout. The class=”mobile” and class=”desktop” is assigned to the
Nicely explained John!
I’ve struggled a little with media queries since they first arrived on the scene, and most authors with explanations I’ve come across seem to believe that by providing lots of extra in-depth technical information it’ll be helpful – that’s usually not the case – it usually adds to the confusion.
Your article however gave me exactly what I need for my current project – clear, concise and without all the usual overly-technical fluff – perfect!
Thank you!
Michael 🙂
There is some debate about this already in the discussion above, but the bottom line is that this comment is just wrong:
“””
@media only screen and (max-width: 600px) {…}
What this query really means, is “If [device width] is less than or equal to 600px, then do {…}”
“””
max-width refers to the viewport width, not to the device width. See these pages for more details:
https://www.sitepoint.com/media-queries-width-vs-device-width/
https://stackoverflow.com/questions/18500836/should-i-use-max-device-width-or-max-width
I am web developer and little bit confuse about media queries. But your words about max and min media queries clear my mind.. keep it up
The Media Queries for Print, Yahoo and support chart is very useful and very well explained, thanks.
Since Lotus Notes doesn’t support media queries, is there a conditional statement that one can use to prevent Lotus Notes from rendering both desktop and mobile versions?
really helpfull thanks
We completely agree! Glad you found the blog informative. Happy testing and keep checking back for updated blogs and tips from Email on Acid.
Nice Article
good post for my knowledge thank you, JAY ORAM.
Thank you for your article. I loved it! It provided me with many insights and helped me figure out media queries better.
This is an absolute horrible article for one reason “Desktop styles (not in a media query)”. This is so incorrect that it borders on neglicence. That IS NOT a mobile first approach. Mobile CSS should NEVER be inside of a media query since there are still a lot of phones in use around the world that do nut support media queries. All your CSS for mobile should be outside of media queries (this does not apply to tablets just phones)
Hey Kevin. You actually do bring up a very good point. A mobile-first approach is the right choice for a lot of senders. And in that case, as you mentioned, you’d use media queries for desktop styles instead of for mobile. In some cases, such as B2B senders who see a lot more desktop opens, using media queries for mobile might their preferred approach.
This article was first published three or four years ago by someone who codes for a B2B brand. So, the mobile-first approach may not have been top-of-mind for the author. We’re working on having our email devs actively review content like this to make sure it’s updated to reflect best practices.