All Collections
New Editor Questions
General information about a new editor
(New Editor) How to optimize the Mobile Version of your email?
(New Editor) How to optimize the Mobile Version of your email?

This article will teach you how to optimize an email template for the mobile mode.

Valeriia avatar
Written by Valeriia
Updated over a week ago

Responsive email design comes as no surprise today, as we all know that mobile-friendliness, aka mobile optimization, is no longer just nice to have, itโ€™s a must.

We're happy to introduce the long-awaited feature of Mobile view directly in the editor. Since then, you have had an opportunity to manage the mobile view directly in the template, and switching to a separate page for the mobile preview is unnecessary.

This possibility allows you to build more mobile-friendly, engaging, and high-quality emails of any complexity in no time, with no coding skills.

To switch between desktop and mobile versions, use the "device" toggle on the top toolbar:

Furthermore, you can set parameters for the whole email template, Stripe, Structure, Container, and Block, which will apply to the mobile view of your email template.

Important to note: the following settings will only work in the mobile version of the email template in email clients that support media queries and if you activated the "Responsive design" control in the "General Styles" โ†’ "General Settings" menu.

Mobile customization in the "General Styles" menu :

In the "General Settings" menu, we can set up Default Structure padding, which will be used by default for all new structures added to email from the Content tab placed on the left side of your working space or while adding new Stripes (rows);

And set up margins around the Message.

In the "Headings" menu, you can apply the font size, text alignment, and line height for different headings by choosing a necessary one, text style, and font color.

In the "Buttons" menu, you can set the font size inside the buttons.

And adjust buttons to the container width, as well as apply the necessary padding.

Stripe settings for the mobile display:

In the "General Styles" โ†’ "Stripes" menu, you can set default font sizes for Header, Content, Footer, and Info area types except for headings. And configure the line-height:

Furthermore, you can customize each stripe separately in case you have multiple content stripes but want to have different configurations for them.

To do that, select the needed stripe, and the corresponding stripe settings menu will open on the left, where you can tune "Padding on Mobile" to add more space around the stripe.

And hide a stripe only for mobile view using the "Hide element on Mobile" option.

Please remember that you can hide any element of your email template.

Structure settings for the mobile display:

Regarding the Structure settings, you can control "Containers Gap on Mobile" to add extra space between containers.

All emails that you build with Stripo are responsive by default. However, you can disable responsive design for some email elements.

The "Responsive Structure" option helps to locate containers within a structure one below the other for mobile view.

The desktop version of the structure with 2 containers:

The mobile version of the structure with 2 containers:

The mobile version of the structure with 2 containers with disabled "Responsive Structure":

In this case, we see two containers on the mobile device in one row.

Important to note:

- Enabling the "Responsive Structure" option may help to improve the mobile view display. However, notice that results may vary on different devices;

- Please be careful with this option; if one of the containers contains a non-responsive image with a large size or font size for the text, this can cause a horizontal scroll.

If you set the "Containers Inversion" for the responsive structure, then the mobile device will display containers in reverse order.

Mobile view with activated "Container Inversion":

Now we see that the picture with a boy in a yellow sweater has moved to the bottom.

Please be informed, you can apply the "Containers Inversion" function if you have only two containers in a structure.

Moreover, there is a possibility to tune Padding on Mobile.

And hide a structure using the "Hide element on Mobile" option.

Container settings for the mobile display:

Here in the "Settings" menu, you can tune Padding on Mobile and hide the container for the mobile view.

Block settings for the mobile display:

For the "Image" block, you can apply the "Responsive image" option, which allows the image to adjust to the width of the mobile device's screen. Adaptivity only works on devices that support it.

Turning this option on will protect you from unnecessary horizontal scrolling and enormous logos.

You can apply alignment, paddings, margins, and font sizes for all other blocks.

Remember, you can hide any element on your mobile devices by enabling the "Hide element on mobile" option.

Thank you for taking the time to read our articles. We hope you will find this information helpful.

โ€‹If you have any additional questions, please email us at

We would be glad to talk with you.

Did this answer your question?