Design Device Targeted Emails With Media Queries

With CSS, you can use media queries to create messages that can be displayed with the optimal design for the device that your contact opens the email with.

At its most basic level, a media query is a snippet of CSS you can add to your email that is used to apply a design style when a set of conditions are met. The media query is an expression that can be either true or false. Generally, you'll want to use media queries to make your messages mobile-friendly. This can include things like having containers stack differently, showing or hiding a container or element, or managing fonts differently when the email is displayed on a screen of a particular size. To make the query work you need to include:
  • @media: Let's the CSS know this is a media query
  • what you want to matter: These are what attributes of the media type that are important. For example, you might want to test the width of a screen.
  • the CSS styling you want to apply: This is what you want to happen when the conditions of the media query are met.
For example, let's say you have a container you don't want to show up when a contact opens the email on a mobile device. In the email message editor you would go to Settings and then click Edit CSS. Then you would enter the following media query in the CSS window:
@media (max-width: 420px) { .container-36469004145 {display: none !important;} }
This query indicates that if the maximum width of the device is under 420px then container 36469004145 will not be displayed. To target a container or element, you must use the unique CSS class ID provided in the email message editor. You can find the unique CSS class ID for the containers and elements in your message by
  1. Editing the element or container so that the Design palette for that container or element is open.
  2. Scrolling to the bottom of the palette.
  3. Copying the CSS class ID found in the black box.

It is not required that you target a specific element or container in your media query. You can apply the query to your message as a whole by using .container instead of a container or element ID. Something to remember though is CSS styling still follows the message design hierarchy rules. So, if you set a media query on the body of the message using .container, any element-level settings will override you media query. A way around this is to use .element when you want to make sure something is applied to everything in a message. For example, smaller text can be hard to read on a mobile phone, so you might want to use the media query
@media (max-width: 420px) { .element {font-size: large !important; } }
to make text appear larger. This will make all of the text in every type of element larger. Instead of large, you could also set all of the text a specific size, such as 16px.
Media attributes that are commonly used in media queries include:
  • Device width: Typically when you target the width of a device you want to display something differently on a mobile device. Most mobile devices have a width of 480px or lower in portrait mode. Because there are so many devices and the size of devices are constantly changing, we recommend you consult the specifications for mobile devices before you build your media queries based on device width. If you want to exclude something from mobile, use max-width. If you want something to only display on mobile, use min-width.
  • Resolution: If you have high resolution graphics that you only want to display when someone views them on a high resolution device, you can set a min-resolution.
  • Orientation: A common reason to target device orientation is when you want containers to stack differently based on orientation: portrait or orientation: landscape.
It is important to note that not all email clients support media queries. Some of the major clients and devices that do not include:
  • Gmail mobile app
  • Yahoo Mail mobile app
  • Microsoft Outlook mobile app on Android
  • Android 2.1 and earlier