Content templates
Email, Pages & Popups
Mobile Options
6 min
often content in an email is organized in multiple columns when viewing columns on a mobile device, they can become quite narrow sometimes this can lead to a sub optimal reading experience with that in mind, the editor will vertically stack content when it's opened on a mobile device this automatic reorganization of content makes your message easy to scroll through it should also prevent the need to use zoom settings to read the email sometimes the default mobile optimization settings don't work with your design vision if you want to change the mobile behavior of your design, there are plenty of features you can use to do this! let’s go over the different options that can impact the mobile version of your design desktop vs mobile preview vertical stacking is supported by the most popular mobile email clients in some cases, the desktop version will be displayed this happens when a client lacks support for standard css one size doesn't fit all there are some cases in which vertical stacking of columns may not lead to the best result a common scenario is a row used to display a navigation bar with text links or icons vertically stacking this content could create excessive empty space in the design it may also hide important elements of the message or even draw too much attention to an element do not stack on mobile the do not stack on mobile row setting allows you to override the default stacking behavior the option is available in the right panel as a row property, toggled off by default email design best practices suggest a careful use of this display setting a user friendly vertical layout on mobile makes sense in most cases as always, it is up to you and your creativity when and how to use this option reverse stack on mobile in some cases, the columns stacked on mobile can work better in a reversed order hide on desktop/mobile one can hide individual content blocks or entire rows from a specific type of device hiding content all content blocks in the bee editor include a hide on setting in the property panel to use it, scroll down until you see the block options section you can check the result by going into the preview and selecting the mobile view you will see that the content blocks for which hide on has been turned on will not be visible hiding rows if you need to hide a larger portion of your message, you might consider hiding an entire row instead the workflow is almost identical to the one you use to hide individual content blocks to start, you'll want to make sure that you select the row you want to hide you can find this option at the bottom of the row properties section of the editor sidebar this section is directly above the column properties section
