Setting Up Responsive Email Design

Responsive design ensures that the email is displayed correctly on both mobile and desktop devices.

It allows you to:

• restructure the email layout;
• change the order of containers;
• hide individual elements.

📘

Note

Responsive design works only in email clients that support responsive layout.

General Responsive Settings

The General styles panel contains all email design parameters. It allows you to quickly apply a consistent style to the entire message and all its elements.

The Responsive design option is enabled by default.

If you disable this option, the email will not adapt to mobile devices.

Responsive Settings for Individual Elements

Each stripe, structure, container, and block has its own responsive settings.

To change them:

1. Click the required element in the template.
2. Open the settings panel.
3. Adjust the parameters for the mobile and/or desktop version.

Hiding an Element

Any email element can be hidden when displayed on a mobile or desktop screen.

For example, you can shorten the Menu block in the mobile version by hiding some of its items.

As a result, the element will not appear in the selected version.

Containers Gap on Mobile

On mobile devices, screen width is limited. Adjusting spacing helps prevent elements from being placed too closely together and improves usability.

Containers Inversion on Mobile

The inversion option changes the display order of containers in the mobile version.

Example

On desktop, the image is on the left and the text is on the right.

After inversion, the text appears first on mobile, and the image is displayed below it.

Use inversion when you need to change the reading order of content on mobile devices.

Responsive Structure

The Responsive Structure option is enabled by default. It rearranges containers so that on mobile devices they are displayed one below another (in a single column).

📘

Note

To keep two cards in a row in the mobile version (for example, two subscription plans), turn this option off for the structure with the cards — the containers then stay side by side on mobile. After that, adjust the image and text sizes manually and check the result with a test send. Give the images in one row the same height, otherwise they line up differently on a narrower screen.

Responsive Image

The Responsive Image option adjusts the image width to fit the mobile screen:

• the image does not extend beyond the screen width;
• the proportions are preserved.

Text Alignment, Size, and Spacing

Separate alignment, font size, and spacing parameters for:

• the desktop version;
• the mobile version.

📘

Note

Mobile display parameters, including the text size, are set separately in the mobile version of the settings panel. The values in the general element settings apply to the desktop version and are not inherited by the mobile one.