Designing Responsive Emails

By default, all emails designed in Ascent360 are responsive. This means that they will automatically stack rows with multiple columns and adjust the layout to the device size and orientation that will be used to display the email. However, it is still a good idea to make sure your designs render as you expect on both mobile and desktop.  

Mobile and Desktop Views

Toggle between the Desktop and Mobile views in the top left of the email designer to preview stacking on different devices. When previewing the mobile version of an email, you'll be able to adjust content settings relating to font size, padding, and alignment for the mobile version of the email only. Mobile customization options are designated by the Mobile tag next to certain settings. 

The Mobile tag will turn blue to indicate the the changes apply only to the mobile version of the email. 

Columns within the same row always stack from left to right unless Reverse Stack Order on Mobile is enabled on the row.  

Use the Hide On option associated with each content block to completely disable a content block for the desktop view or mobile view. This is helpful if you want to completely hide a block or tailor two similar blocks for different views. 

Use the Visibility Icon in the top left to toggle the visibility of hidden elements in the email preview. 

Content Stacking

Content blocks will stack automatically, grouped by column, reading from left to right across a row. Use the desktop and mobile previews to view how content in your email will stack. 

Use the Do not stack on mobile and Reverse stack order on mobile Row Properties to further customize the stacking behavior for a row.