How to apply mobile-specific CSS to your campaigns

You can optimize emails for smart phones and other handheld devices by creating a separate set of styles to be used by devices that recognize media queries.

This means you can create emails that adapt to the resolution they are viewed on and output content to suit, for example: narrowing the line-length of paragraphs to make them more readable and prevent sideways-scrolling, or reducing the dimensions of an image. Devices that don't recognize media queries will just apply your default styles 

Check out W3C Recommendations for Media Queries to learn more.

Adding a mobile stylesheet to your email

To declare your mobile stylesheet, use the following CSS within your style tags:

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

The maximum device width of 480px is the width of a "flipped" iPhone display. Within this declaration, you can define how elements within your HTML email will display on a mobile device, for example:

@media only screen and (max-device-width: 480px) {
     body {
          padding: 10px !important;
     }
    .container {
          padding: 0px 10px 5px 10px !important;
     }
     .header {
          font-size: 16px !important;
     }
     .headline {
          font-size: 20px !important;
     }
     #screenshot_image {
          width: 275px;
          height: 190px;
     }
}

Note the use of !important declaration to override any inline styles.

Examples

Using the stylesheet above, here's how an email would display in a desktop client:

Desktop client

This is how the same email looks on a mobile device:

iPhone

Notice how the headings and images have changed size to accommodate this smaller resolution. You can also use -webkit-text-size-adjust: none; to prevent handsets from automatically resizing your text.

Tip: As we're using the @media query to override any inline styles, it's better to start with inline styles for your standard formatting, and add your @media styles to the <head> section of your email.