---
title: Spacing and layout
url: https://support.troopthemes.com/guide/emerge/spacing-and-layout/
theme: Emerge
theme_styles: Cafe, Elements
---

# Spacing and layout in Emerge

Spacing works in two steps: In **Edit theme** → **Theme settings** → **Layout**, the desktop and mobile spacing sizes define what Small through Extra large mean storewide. On each section, **Spacing above** and **Spacing below** pick from that scale: None, Small, Medium, Large, or Extra large. Changing a size in Layout updates every section that uses it.

![Emerge Layout in Theme settings](https://support.troopthemes.com/_images/emerge/spacing--settings.jpg)

## Theme settings → Layout (Emerge)

### Small through Extra large (Emerge)

The desktop and mobile spacing sizes each set Small, Medium, Large, and **Extra large**. In **Theme settings** → **Layout**, the first group of sizes is under **Desktop spacing**. The second group, described as the sizes used on mobile, is the mobile scale.

Those settings are the pixel values behind the **Spacing above** and **Spacing below** dropdowns on most sections. Extra large is for heroes, stories, and pauses, not for every block on a collection page.

### Desktop and mobile (Emerge)

Mobile Extra large is easy to overdo. Preview the phone layout after you raise the mobile Extra large size.

Reuse the same **Spacing above** / **Spacing below** dropdown on adjacent sections: Medium throughout the shop, or Large on a hero and Medium on what follows. Use **None** when two sections should sit flush. Add a **Divider** when you need a gap with no content. Keep mobile spacing smaller than desktop, and preview both after you change the scale in Layout.


Shapes add height on their own, pair with Medium spacing, not double Extra large on both edges.

## Shapes use space too (Emerge)

A top or bottom [shape](https://support.troopthemes.com/guide/emerge/section-shapes/) is extra geometry between sections. If two sections both use Extra large **and** both use a tall wave, you will get a valley of empty color. Prefer a shape on one edge of a pair, or Medium spacing when both edges have shapes.

## On each section (Emerge)

Choose None through Extra large from the section dropdowns. Use **None** when a shape should sit flush against the next background. A **Divider** section is still the right tool for a simple gap with no shape.

> **Tune Layout, not one-off pixels**
>
> If everything feels tight, raise Large and Extra large in Theme settings. Changing twenty sections by hand is how stores drift out of rhythm.

## Ask Sidekick <img src="/_images/sidekick-icon.png" alt="" class="sidekick-icon"> (Emerge)

Open [Sidekick](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/sidekick) from the theme editor toolbar (top right, next to the device preview icon), or press `⌘.` (`Ctrl+.` on Windows). If your pages feel cramped or overly loose and you can't tell which setting is responsible, describe the problem.

> "My homepage sections feel too tight on mobile, what desktop and mobile spacing values should I use for Small through Extra large?"

It can point you toward the relevant spacing settings and suggest values, rather than you adjusting sliders section by section to find the right combination.

![Opening Sidekick from the theme editor toolbar](https://support.troopthemes.com/_images/emerge/sidekick--theme-editor.png)

## Troubleshooting (Emerge)

- **A tall empty band between sections**: both edges have a shape, or Extra large is stacked. Put a shape on one edge only, and drop spacing to Medium.
- **One section didn't move**: change **Spacing above** / **Spacing below** on that section.
- **Mobile feels endless**: lower the mobile Extra large size in **Layout**. Shapes add height on phones too.