With over 50% of email now being opened on mobile the look of your email on smaller screens is more important than ever. Of course our builder emails are optimized for excellent mobile performance automatically. You may also want some flexibility with how this content is displayed. We would recommend regularly checking on the mobile preview of your email during the build and considering some of the options below to help you to optimize mobile performance.
Controlling Column Stacking
When using multiple columns the default behaviour is for content to the right to stack below content on the left so that it retains a readable size and the reader can scroll through the content on their phone. This is really useful in lots of cases but may not be the behaviour that you always want. In order to control this you can simply click on a row that contains more than one column and use the toggle to make the content not stack on mobile:
Email design best practices suggest a careful use of this display setting, as keeping a user-friendly vertical layout on mobile makes sense in most cases. This setting will give you more control over the use cases where keeping columns horizontal makes sense.
Controlling image width
Another option to help give control over your mobile layout is to make images full-width on mobile. You may find you have a multiple column layout with images aligned to the left or right on desktop:
The default mobile view would leave this image aligned to the left on mobile:
If you find your images are aligning to the left or right and leaving some unwanted white space on smaller screens then a simple solution can be to use the full-width on mobile toggle to make sure the image aligns centrally and fits to the width of the screen on mobile phones:
The appearance on mobile in this case would look like this when the full-width image option is used:
When using this option you should consider that your image needs to be of a higher quality. Since it will be stretched to the full width of the mobile screen we would recommend that the image uploaded is at least 600px in width so that it looks crisp and sharp on mobile.
Hiding Content on Mobile
You can hide any content block on mobile by selecting it and scrolling to the bottom of content properties and toggling on the Hide on mobile option.
You can check the result of turning this property on for a specific content block by going into the Preview and selecting the Mobile view. You will see that as you toggle between Desktop and Mobile the content blocks for which "Hide on mobile" has been turned on will not be shown.
One example of where this could be useful is hiding spacer content that is taking up un-needed height on mobile.
With these tools at hand you should be able to have a lot more control over the look of your email on mobile.