How to make a section full screen in Webflow?

A full-screen section spans the entire viewport height and width, creating a hero area, a cover page, or a dramatic focal point. In Webflow, this is straightforward once you understand how viewport units work.

Using viewport height (vh)

The standard method is to set the section's height to 100vh:

1. Select the section element
2. In the Style panel, go to the Size section
3. Set height to 100vh

This makes the section exactly one viewport tall on every screen. The vh unit stands for "viewport height" — 100vh equals 100% of the browser window height.

Width is typically handled by the section being a block-level element, which naturally stretches to 100% of its parent. If your section has a max-width constraint, either remove it or override it for this specific section.

Centering content inside the full-screen section

A full-screen section usually needs its content centered both horizontally and vertically:

1. Set the section to display: flex
2. Set flex-direction: column
3. Set justify-content: center (vertical centering)
4. Set align-items: center (horizontal centering)

This places your content dead center regardless of how much space the content actually takes up.

Handling mobile browser address bars

Mobile browsers have address bars that shrink and grow as the user scrolls. The 100vh value doesn't account for this, which can cause content to be partially hidden behind the browser UI.

The fix is to use 100dvh (dynamic viewport height) instead of 100vh. In Webflow's Style panel, you can type 100dvh directly into the height field. The dvh unit adapts to the visible area on mobile, expanding and contracting with the browser chrome.

If you need broader browser support, a JavaScript-based approach can calculate the actual visible height and apply it as an inline style.

Using min-height instead of height

In some cases, min-height: 100vh is better than height: 100vh:

• height: 100vh — the section is exactly viewport height. Content that overflows will break out of the section visually.

• min-height: 100vh — the section is *at least* viewport height but can grow taller if content requires it.

Use min-height when your section might have enough content to exceed one viewport on smaller screens. Use height when you want a strict full-screen lock regardless of content.

Adding a full-screen section to an existing page

If your page already has sections and you want to insert a full-screen one:

1. Add a new Section element from the Add panel
2. Give it a distinct class name like hero-fullscreen
3. Apply the height and centering styles to that class
4. Other sections remain unaffected since they use different classes