Using Media Queries in HTML Email

Now that Gmail is supporting media queries in some clients, we have seen a resurgence in interest about how to use them. Read on to learn about media queries in HTML email.

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 presentations of their content.

At a basic level, media queries enable an email developer to create responsive email by detecting the width of the display. For this purpose, the most commonly used query is max-width. At any width that is less than the max-width specified, all of the CSS within the query will take effect.

Media queries can also be used to target certain resolutions or even specific email clients. Media queries can be used instead of or in addition to fluid hybrid design.

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.


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.


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 Min-Width and Max-Width

These queries 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.


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 make sure our emails look great on these screens. Androids, 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.

  • Breakpoint 1 (iPhone 5S): 320px
  • Breakpoint 2 (iPhone 6+): 414px
  • Breakpoint 3 (iPad Mini): 703px
  • Breakpoint 4 (iPad Air): 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 the Breakpoint 4 styles, 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)

Coding for 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">
		<td style="padding:10px 0">
            <table align="left" width="49%" border="0" class="deviceWidth">
            <table align="left" width="49%" border="0" class="deviceWidth">


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 3 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 recipients.

If you’d like to start working with a template like this, grab our “Emailology” template from the Resources section. You can get a free account to gain access to all of our resources (like templates, white papers, webinars and client tips and 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’s page for even more media query techniques.


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 Yahoo! Mail, or to include messages intended only for Yahoo! users.

@media (yahoo) { ...  }


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) { ...  }

Media queries for print

By setting specific styles for print, you can ensure your email will be easy to print 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 { ...  }

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.

Media Query Support

EnvironmentEmail ClientMedia Queries Supported?
WebmailGoogle Apps
WebmailYahoo! Mail
WebmailOffice 365
DesktopApple Mail
DesktopLotus Notes
DesktopOutlook 2000-2016
DesktopOutlook 2011 (Mac)
MobileiOS Mail
MobileGmail App (Android)
MobileGmail App (iOS)
Webmail (Regional)BOL
Webmail (Regional)Comcast
Webmail (Regional)
Webmail (Regional)
Webmail (Regional)GMX
Webmail (Regional)La Poste
Webmail (Regional)Libero
Webmail (Regional)
Webmail (Regional)Nate
Webmail (Regional)Naver
Webmail (Regional)
Webmail (Regional)QQ
Webmail (Regional)
Webmail (Regional)
Webmail (Regional)Telstra
Webmail (Regional)Terra
Webmail (Regional)
Webmail (Regional)

What do you do with media queries?

Let us know your favorite uses for media queries in the comments below!


12 thoughts on “Using Media Queries in HTML Email”

  1. SquareBalloonEoin,
    Hmmm, that’s odd. We’ve had reports from others in the UK that Gmail support is indeed active. Have you tested some basic responsive code (not a full template) to make sure it’s not a coding issue?

  2. Nope, it was a full template. Although it is responsive in the other responsive tests. Unless of course, my media query is wrong. My media does work on other devices, so we can assume that is right? Or is there a specific media query for Gmail? Perhaps they are rolling it out to paying customers first?

  3. SquareBalloonEoin,
    No, it should be out for all UK users. I would suggest modifying your media query to make sure that it would target anything that can accept media queries. For example, you could use “@media (max-width: 3333px) {…}”

  4. Geoff – As we can’t integrate browser detection, how can we use this, while not causing rendering problems for unsupported clients?

  5. Brian,
    The usual approach is to code the email for desktop, and then use media queries to make it look good on mobile. Because the majority of clients that don’t support media queries are desktop clients (or web clients), it will look as it should across the board.

  6. Geoff, it’s not so much about testing the media query with such a broad requirement, because the media query works on iPhone, just not on the Gmail app. So we can assume the media query works but Gmail App doesn’t, do you agree?

  7. Hello Geoff,
    Wondering if you could provide insight on this issue. I am using a template based on your coffee shop template with 600px email width. Basic code for columns is

  8. I am having issues with Android 6.0 in Litmus testing.. It doesn’t appear that the newest version of Android allows media queries? I have tried several different variations of media queries and I can’t seem to make them work. Android 4.4 works but not 6.0 which doesn’t make any sense. I have a 1/3 + 2/3 layout for desktop and a stacked layout for mobile, so on Android 6.0 the layout is completely broken. It works on every other device however. Any recommendations?

  9. Leave a Reply

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

    Free Email Goodies