Preview Responsive Content Layouts (NEW in Version 1.9)

The ability in Version 1.9 to set margin, padding, and border settings separately for large, medium, and small device sizes also gives you a way to preview layouts on various device sizes.

Although this feature was creating as a way to adjust spacing in row layouts, it’s also a great way to check other responsive changes such as image backgrounds and column stacking.

Note: The preview displays the entire content layout on the page, but not the theme areas such as header and footer

To preview your content layout responsively:

  1. Open the row settings for any row on your page and click the Advanced tab.
  2. Click any of the device icons, as shown in the following screenshot, to open the Content Layout Preview.Screenshot of the Advanced tab of the Content Layout preview options.
  3. Keep clicking this icon to toggle the preview for large, medium, and small devices.

See the Related Articles for more information about setting row margins, padding, and border widths individually for each device.

 

Last updated on Dec 6, 2016