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

By default, any Column layers in your email design's Row layers will be stacked on mobile, but you can configure this per Row based on what you prefer them to do.

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.

If you're using a more than 2 Column layers in your Row, you may want to consider keeping them set as stacked, otherwise the content inside of them can become very narrow and small on smaller mobile device screens.

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.

Please ensure you only select a dropdown value that makes sense for your number of columns; for example, setting the dropdown option to 3 Columns Per Row on Mobile, if your Row only contains 2 columns in the design, would result in those 2 columns having a width of 33% each, which won't take up the entire screen width on mobile and may look broken or strange.

Overriding vertical alignment for mobile column rows ​

If your Row still keeps multiple Column layers side by side on mobile, you can also override how those columns vertically align against each other for that mobile row. To do this, click on your Row layer, enable the Override Column Vertical Align on Mobile toggle, then choose Top, Middle or Bottom from the dropdown selector next to it.

This mobile vertical alignment override is only enabled when your Row still has multiple columns on mobile, which means either:

  • the Stack Columns In This Row toggle is turned off, or
  • the toggle is turned on and the dropdown is set to more than 1 Column Per Row on Mobile

You can apply settings in bulk by opening Settings, then selecting multiple Emailify layers of the same type in Figma. Any setting you change will be applied to all selected layers.