Adjusting section height

The section height setting in the B12 Editor controls how tall a section appears on your website. Adjusting it helps balance your layout, highlight images, and ensure your content looks good across devices.

Editing section height

1. In the left sidebar menu, click Website > Pages.

2. Select the page, then click the section you want to adjust.

3. In the left sidebar, scroll down to Section height.

4. Choose from the available options:

• Auto – The section height adjusts automatically to fit its content.

• Full – The section fills the entire height of the screen.

• Half – The section fills half the height of the screen.

• Custom – Lets you set a custom height using vh (viewport height) units. vh is based on the percentage of the device's screen height.

  • For reference:

    • 100vh = the full height of the screen

    • 50vh = half (50%) the screen height

    • 25vh = one quarter (25%) of the screen height

How section height works

• If your content (text, images, forms, etc.) is taller than the chosen height, the section will expand automatically.

• Height adjustments are most noticeable when working with background images, which means increasing height allows more of the image to be visible.

Mobile vs. desktop differences

• Background images behave differently across devices. For example, fixed background images display correctly on desktop but are not supported on iPhones.

• Because screens vary in size, a background may look cropped or stretched differently on mobile vs. desktop.

• Mobile optimization is built into B12, but it’s important to preview your site in all views (desktop, tablet, and mobile) to make sure sections look right.

Making sections smaller

If lowering the section height doesn’t reduce its size as expected, try these adjustments instead:

• Reduce the amount of text.

• Lower font sizes.

• Resize or crop images.

• Switch to a more compact section layout.