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.

How do I stack columns on mobile? ​

Select the Row layer that contains the Column layers, click the Settings button in the plugin header, then turn on Stack Columns in this Row. By default, this stacks the Row's columns into a single column on mobile.

Why are columns not stacking on mobile? ​

Columns will not stack if Stack Columns in this Row is turned off for that Row, or if the Row is configured to keep more than one column per row on mobile. Some preset components may also have mobile stacking turned off by default when that matches the preset design.

To fix it, select the Row, open Settings, enable Stack Columns in this Row, and choose 1 Column Per Row on Mobile if you want each column to appear one below the other.

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 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.