How can I make the hero section in Webflow fill the browser viewport perfectly regardless of the height of the browser window?
TL;DR
- Set the hero section height to 100vh in the Style panel.
- Use Flexbox for centering by setting Justify: Center and Align: Center.
- Adjust height if a fixed navbar is present using
calc(100vh - [Navbar Height]px). - Test responsiveness and tweak padding/margins if needed.
To make the hero section in Webflow always fill the entire browser viewport, you need to set its height to 100vh (100% of the viewport height).
1. Set the Hero Section to 100vh
- Select the hero section in Webflow's Designer.
- In the Style panel, go to the Size section.
- Set Height to 100vh (Viewport Height).
2. Ensure Flexbox or Grid for Centering (Optional)
- If you want to center content within the hero section:
- Set Display to Flex.
- Choose Justify: Center and Align: Center.
- This will keep content vertically and horizontally centered.
3. Adjust for Navbar (If Fixed)
- If the navbar is fixed or absolute at the top:
- The 100vh height might overlap with the navbar.
- Reduce the hero section’s height using
calc(100vh - [Navbar Height]px), but this requires custom CSS.
4. Make It Responsive
- Test different screen sizes to ensure it resizes correctly.
- If needed, add padding or margins for better spacing on smaller devices.
Summary
Set the hero section height to 100vh to make it fill the viewport. Use flexbox for centering, and adjust for a fixed navbar if necessary.