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 Spacer block's Spacing per breakpoint field in the theme editor

---

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

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

---

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