All emails created in the drag and drop editor are automatically responsive, which means they adapt to various screen sizes. You can preview the mobile layout under the Preview tab in the email editor.
Changes on mobile view
The following changes are automatically applied to emails in responsive view to ensure the best possible mobile experience.
Images
Images 270px or wider are scaled up (stretched) to fit the width of small screens.
Line height
Line height is reset to a uniform 1.5 through the email to ensure good readability on mobile screens.
Font sizes
Font sizes are adjusted to ensure text isn't too small to read and links aren't too small to tap and also to prevent headlines displaying too large on mobile screens:
Regular (paragraph) text is set to 16px throughout the email
H1 headlines are displayed as 24px
H2 headlines are displayed as 20px
H3 headlines are displayed as 18px
H4 headlines are displayed as 16px
Padding
Padding becomes fixed at 20px on the left and right of content blocks if the content block has any padding on desktop view. This is to prevent too much padding that may look good on desktop view but won't work well on mobile devices.
For content blocks with no padding on desktop view, padding will be kept at zero on mobile view.
Content order for multi-column layouts
In a multi-column layout content within a section (row) are ordered top to bottom in the left column, followed by content top to bottom in the right column.
Multi column section split into multiple sections (rows)
Multi column section in a single section (row):
Tables
Tables don't convert well to mobile view and the message may have horizontal scrolling due to tables pushing content too wide on small screens. There is no setting or workaround to mitigate this issue. For best mobile experience avoid inserting tables to emails.
Long links and horizontal scrolling
If your email contains links where the raw URL is shown rather than linking URLs to a button or text this can cause emails to be too wide in mobile view as there is no way for URLs to be split into multiple lines. Instead of showing URLs, add them to a button or text. Here's an example:
