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.
​

When using multiple columns the default behavior 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 behavior 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 at the bottom of the right nav menu 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.

Reverse Column Stacking order

By default a multi-column design will stack with the content on the left being displayed first and the content on the right stacking under it. Sometimes a design may work better with the content stacked the other way (right first & left second)
In that situation select 'Reverse Column order on Mobile' to switch the stacking order

Image size on mobile
​
Images in your emails can be set to display at full width when viewed on mobile devices. That will often improve the viewing experience  on smaller devices.

You can hide any content block (text, button etc) on mobile by selecting it and scrolling to the bottom of content attributes and toggling on the Hide on mobile option. You can do that same thing with entire rows of content.
​

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.

Set alternate values for mobile.

You can have different settings for desktop and mobile. Size, Alignment and Padding can now have different values for mobile and desktop. In the Builder screen it will default to the desktop view.

Below is a list of available dual settings for mobile:

Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com