> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/how-to-guides/how-to-set-up-custom-spacing.md).
# How to set up custom spacing
The **Spacer** block can change its height **per screen size** instead of a single desktop/mobile value. This is the **Spacing per breakpoint** setting.
***
## The Breakpoints
Helix uses six breakpoints. Each key covers a range of screen widths:
| Key | Screen width | Typical device |
| ----- | ------------- | ------------------ |
| `xs` | 0 – 479px | Small phones |
| `sm` | 480 – 767px | Large phones |
| `md` | 768 – 1024px | Tablets |
| `lg` | 1025 – 1279px | Small laptops |
| `xl` | 1280 – 1440px | Laptops / desktops |
| `xxl` | 1441px and up | Large desktops |
***
## Setting Spacing per Breakpoint
Turn on **Custom spacing** in the Spacer block, then fill in the **Spacing per breakpoint** field.
**Format:** `xs:40px, sm:50px, md:70px, lg:10%, xl:30%, xxl:50%`
Each value **must** carry a unit:
| Unit | Behavior |
| ---- | -------------------------------------------------------------- |
| `px` | A fixed amount of space (e.g. `70px`). |
| `%` | A proportional amount that scales with the surrounding layout. |
You only need to list the breakpoints you want to override — any breakpoint you leave out keeps the block's built-in setting for that range.
| Rule | Behavior |
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| Empty / omitted breakpoint | No override — falls back to the Spacer's built-in mobile (`xs`, `sm`) or desktop (`md`–`xxl`) settings for that range. |
| Value with no unit | Skipped — always add `px` or `%`. |
| Negative value | Skipped. |
**Examples**
| Value | Result |
| ------------------ | ------------------------------------------------------------------------------------------- |
| `xs:24px, md:64px` | 24px of space on phones, 64px from tablets up, defaults everywhere else. |
| `lg:10%, xl:20%` | Space grows proportionally on larger screens while mobile keeps the block's default height. |
***
## Tips
{% hint style="success" %}
* Start from the smallest screen (`xs`) and work up — you only need to add a breakpoint where the spacing should change.
* Mix units freely: use `px` where you need an exact gap and `%` where it should scale with the layout.
{% endhint %}
***
{% hint style="info" icon="headset" %}
**Need help?**
Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.
Chat with us Submit a ticket
{% endhint %}