Responsive styles

BetaThis feature is new and we're actively working to improve it. Updated

How to set responsive styles

You can set responsive styles in the visual editor or by writing your own CSS.

Set responsive styles in Design Studio

You can set responsive styles for your brand and for individual emails. Our responsive styles have a breakpoint of 600px. Check out these articles for more information:

Add custom code in Design Studio

You can code custom styles for features that don’t currently have UI support for responsiveness like text transformations, font families, and image swapping. Check out how to use media queries to accomplish this.

We recommend building your emails mobile-first. This means optimizing your email for smaller device sizes (mobile) then customizing responsive styles for larger device types (desktop).

This is important because a number of email clients don’t support responsive styles, and generally speaking, mobile styles look better on desktop than desktop styles look on mobile.

To build custom, responsive styles in Design Studio:

  1. Build mobile-first in the visual editor.
  2. Add custom CSS classes to elements.
  3. Define @media queries for larger screens in the code editor.
  4. Add responsive styles.

Inbox limitations & best practices

Email clients can vary from fully supporting responsive styles to not supporting them at all. To help address this, we recommend you:

  1. Build mobile-first emails as mobile styles tend to look better on desktop than vice versa.
  2. Preview messages across device dimensions to see if you need responsive styles.
  3. Preview with styles blocked to simulate what recipients will see when responsive styles are not supported.

Some email clients don’t support responsive styles:

  • T-Online
  • GMX
  • web.de
  • Gmail mobile webmail
  • Gmail mobile app when used with a non-Google account

In these clients, recipients will see the mobile version of your email by default. Our standard components are built mobile-first since mobile styles tend to look better on desktop than vice versa.

Some email clients have a preview pane for emails, like Gmail webmail, Outlook webmail, and Yahoo webmail, but an email may not display as expected in the pane because the breakpoint is based on the width of the email client app, not the pane itself.

Preview message before adding responsive styles

Before you add responsive properties, preview the email and send yourself test messages to see how it displays across screen sizes. You may not need as many responsive styles as expected because of our fluid layouts.

We built our standard componentsA pre-built block that helps you build beautiful, engaging messages as quickly as possible in Design Studio. scale to any screen size. So it’s possible your emails will look good without you explicitly setting responsive styles!

Preview with styles blocked

If you add responsive styling, preview the email with Block styles enabled to see what the email may look like in email clients that don’t support responsive styles. Then modify your default (the styles under the mobile icon) as needed to improve display.

How to code custom responsive styles

1. Build mobile-first in the visual editor

First, build your email in the visual editor with mobile styles in mind. Drag in standardA pre-built block that helps you build beautiful, engaging messages as quickly as possible in Design Studio. or custom componentsA custom block of code with content and properties you can reuse across messages made in Design Studio. from the Insert menu. Click any component to open the Properties menu and style your components for mobile.

Switch to mobile view at the top of the editor to preview at a smaller device size while you edit.

2. Add custom CSS classes to elements

To style components differently on larger screens, start by adding class names to the elements you want to target.

Click a component in the visual editor to open the Properties menu. At the bottom, click Advanced, then enter a class name in the CSS Class field—something like text-transform-uppercase.

The class name can be anything you want with a few exceptions:

  • No spaces; you can use hyphens - or underscores _ instead.
  • Can’t start with a number

It’s also best practice to:

  • Avoid starting a class name with a hyphen or underscore
  • Avoid using special characters like & + $ etc.

3. Define @media queries for larger screens in the code editor

Now that you’ve added CSS classes to the elements you want to make responsive, you’ll define when those styles should apply using a @media query.

In the top right, click and switch to the code editor to define your CSS classes.

In the <x-head> of your email, add a <style> tag with a @media query. This tells your message when to switch from mobile styles to styles intended for larger screens.

<x-head>
  <style>
    @media screen and (min-width:500px){

    }
  </style>
</x-head>

In this example, we’ve set min-width:500px which means that the styles within the query apply to emails on screens 500px wide and up. You can change this value to suit your needs.

4. Add responsive styles

Now that you’ve defined when your styles should apply to larger screens, you can write the CSS that updates your layout at those sizes.

Inside the @media query, add your styles for larger screen sizes, like desktops.

  1. Add each class name you added to your components to the query. Preface the name with a period and follow it with curly brackets.
  2. Add CSS attributes to style the class.
  3. Add !important to each style attribute to make sure it overrides any other style.
<x-head>
  <style>
    @media screen and (min-width:500px){
      .text-transform-uppercase{
        text-transform: uppercase !important;
      }
    }
  </style>
</x-head>

Some components are made of multiple elements, each with specific styles. This means sometimes you’ll need to add selectors (img, div, p, etc) to get the styles to work. For example, an image would need an img selector:

<x-head>
  <style>
    @media screen and (min-width:500px){
      .responsive-margin img{
        width:300px !important;
      }
    }
  </style>
</x-head>

Test out an example

New to responsive styles? Try out the example below!

Create a Design Studio email then copy/paste the below HTML into the code editor. Click between the desktop and mobile views at the top of the preview panel to see the styles change based on screen width!

<x-base>
  <x-section padding="20px" class="padding-40">
    <x-heading-1 :font-size="30" class="font-size-50">Hello world&nbsp;</x-heading-1>
    <x-image class="image-100p" align="center" width="300px" src="https://images.unsplash.com/photo-1550414485-9f22b971dbf0?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
    <x-cta class="button-300" width="100%" href="https://parcel.io/">Click Me</x-cta>
  </x-section>
</x-base>
<x-head>
  <style>
    @media screen and (min-width:500px) {
      .image-100p img {
        width: 100% !important;
      }

      .button-300 {
        width: 300px !important;
      }

      .text-transform-uppercase {
        text-transform: uppercase !important;
      }

      .padding-40>div {
        padding: 40px !important;
      }
    }
  </style>
</x-head>
Copied to clipboard!
  Contents