11

Code custom, responsive styles

Design Studio supports mobile-first email development. You can choose to show or hide certain elements on mobile through the Properties menu of the visual editor. This article shows you how to customize responsive styles further using @media queries in the code editor.

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.

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 font-size-50.

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){
      .font-size-50{
        font-size:50px !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;
      }

      .font-size-50 {
        font-size: 50px !important;
      }

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