Email rendering on mobile devices

Prev Next

Although you've already set your preferences in the General Settings tab, those preferences only apply to desktop devices. You must also set your mobile preferences. 

Say your font size is set to 14px for desktop. On mobile devices, it will be too small, so you'll need to change it to something like 16px. 

You need to adjust preferences for all texts, info areas/footers, buttons, etc. 

New Drag & Drop 58(1)

Don’t let your customers miss the buttons :)

Set preferences for mobile view

1. In the settings panel, click the Appearance tab.
2. Click the mobile view tab.
3. Set your preferences for headings size, text size in different content areas, and text size in buttons.

Use responsiveness toggle for mobile view

The responsive toggle enables the size of your image or element to fit different screens, such as mobile or tablet. If the toggle is off, the design will be displayed as it is in the editor for all screen types. Below, you can see how it works for responsive images and structures.

Responsive Image

For images like your brand logo, it is recommended that you toggle the Responsive image off to prevent the logo from unexpectedly scaling up on different screens. 

The following is an example email design.

If you toggle on the Responsive image, your logo might look like this on mobile devices.

If you toggle off the Responsive image, your logo can look like this on mobile devices. 

Responsive Structure

If you have several campaign images or product recommendations in the same row, you can use the Responsive structure toggle to adjust the display. If you toggle this option, the number of products displayed in a row will change according to screen size. For example, if you have four products in one row, it will be displayed as one product in a row in the mobile display. On the other hand, if you toggle this option off, the number of images or the product in a row will not be changed according to the screen, instead their sizes will be adjusted.

The following is an example email design.

If you toggle on the Responsive structure, your design will render as follows on mobile devices. 

If you toggle off the Responsive structure, your design will render as follows on mobile devices.