Stacking (or not stacking) columns layers inside your rows on mobile

By default, any Column layers in your designs will be set to stack on mobile (unless you're using a preset component where this is already turned off prior to match its intent).

You can change this behavior on mobile by clicking on any Row layer, then clicking the Settings layer in the plugin header, and toggling the Stack Columns in this Row toggle option on or off.

Overriding the number of stacked columns on mobile ​

By default, enabling the Stack Columns in this Row toggle option will stack all the Column layers in your Row into a single column, but you can optionally override this by selecting any of the options in the dropdown selector next to the toggle in the plugin:

  • 1 Column Per Row on Mobile
  • 2 Columns Per Row on Mobile
  • 3 Columns Per Row on Mobile
  • 4 Columns Per Row on Mobile

For example, if you have a Row in your with with 4 Columns, you could select the 2 Columns Per Row on Mobile option and that would ensure your columns are stacked in 2 columns across 2 rows (displaying as a "grid" of 4) when the row is viewed on mobile.