Viewport Height With Automatic Offsets

The YOOtheme Pro builder gives you precise control over viewport-based heights across sections, rows, and elements.

Define custom viewport heights in percent and optionally subtract the header height automatically. This is perfect for hero sections that should fill the visible screen, regardless of the header height.

The same options are available for builder elements like Image, Video, Map, Slideshow, and Slider. When images and videos are set to fill the viewport, they automatically cover their content box, just like background images.

Sections and other elements, such as maps, can also subtract the height of the following section, so both fit perfectly within the same viewport. This is useful, for example, when combining a full-height hero section with a compact partners section below it.

These smart offsets are fully responsive and adapt to any device.

Finally, you can expand a section to fill the remaining viewport height on short pages, such as imprint or contact pages, ensuring the footer stays at the bottom.

With viewport-based heights and automatic offsets, you can create perfectly aligned layouts that fill the first visible screen on any device.