Layout theme settings

Applies to: Highlight 4.1.0 and later. Added in: Highlight 1.0.0. Last checked: 2026-10-13 against Highlight 4.1.0.

The Layout theme settings set the vertical spacing of every page: the space between the header and the first section, and the space between sections.

Where to find it: Theme settings → Layout

Editing layout spacingCopy Anchor Link

The spacing between sections in Highlight is dynamic: it follows the height of the browser window. You can still change it if you want sections closer together or further apart.

• Site top margin (0 to 300 px, default 100 px) sets the space between the header and the first section. Highlight reduces it on smaller screens: to 75 percent on laptops (1023 to 1366 px wide), to two thirds on tablets (at least 40 px) and to half on phones (at least 30 px).
• Space between sections (0 to 100, default 20) sets the space below each section as a percentage of the window height: 20 means 20 percent of the screen height. Highlight reduces it on smaller screens, to about 85 percent on laptops, 58 percent on tablets and 55 percent on phones.

How do I put sections closer together?Copy Anchor Link

Lower Space between sections, for example from 20 to 10. The change applies to every page. To reduce the space on one regular page only, select its main page section in the theme editor and turn on Reduce the margin between all sections; see Page.

Why does the space between sections change when I resize the window?Copy Anchor Link

Because Space between sections is a percentage of the window height, not a fixed number of pixels. A tall window gets more space between sections than a short one. Set a lower value if the gaps look too large on large screens.

All Layout settingsCopy Anchor Link

Every setting, with its type and default.

Related pagesCopy Anchor Link

• Colors theme settings: the color part of the old Colors & layout article.
• Page: Reduce the margin between all sections on page templates.
• Highlight presets: the spacing values of each preset.