---
url: "/emailify/design/stack-mobile-columns.md"
description: "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."
---

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

[Video](/assets/videos/emailify/design/stack-mobile-columns.mp4)

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.

> **Note:** 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.

> **Note:** 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**

> **Tip:** You can [apply settings in bulk](/emailify/design/settings#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.