logo jingle

Layout

Layout controls the global spacing and grid sizing rules that frame every page of the theme. Apart from the Spacing base, which is a single global unit, each field below can be set independently for desktop, tablet and mobile, so your containers, sections and grid gutters adapt to every screen size.


Spacing base

The base spacing unit (a single number) that the rest of the themes spacing values are derived from. Increasing it scales spacing up everywhere at once; it is global and not set per resolution.

Container width

The maximum width of the centered content container. It caps how wide page content can grow before margins appear on either side.

Sections spacing

The vertical spacing applied around each section, controlling how much breathing room separates one section from the next.

First section spacing

The top spacing of the first section on a page, set separately so the opening content can sit closer to (or further from) the header than the sections that follow.

Column gap

The horizontal space between columns within a row, defining the gutters of the grid.

Row gap

The vertical space between stacked rows inside a section.

Row border radius

The corner rounding applied to rows, letting you soften the edges of each rows background or border.

On this page