Small, large, and dynamic viewport units
You can use a variety of height units to make your page designs work across breakpoints. Viewport height (vh), dynamic viewport height (dvh), and small viewport height (svh) are three height units commonly used to tune the layout of your pages. In this video lesson, we'll cover when to use each to ensure your site looks great on all devices.
Video transcript
Small, large, and dynamic viewport units in CSS give you ways to size elements relative to the visible area of the browser window. They're particularly useful for full-screen layouts, hero sections, and elements that need to respond to the actual visible area on any device.
The traditional viewport units are vw (viewport width) and vh (viewport height). 100vh means 100% of the viewport height. However, on mobile browsers, 100vh can be problematic because it doesn't account for the browser chrome (address bar and navigation) that appears and disappears as you scroll, causing layout shifts.
The newer dynamic viewport units address this. dvh (dynamic viewport height) adjusts dynamically as the browser UI changes — 100dvh always equals the currently visible height. svh (small viewport height) is fixed to the smallest possible viewport (browser UI fully visible). lvh (large viewport height) is fixed to the largest possible viewport (browser UI hidden).
In Webflow, you can use these units in the Style panel by typing them directly in dimension fields. For example, setting a hero section's height to 100dvh ensures it fills the visible screen on mobile without the layout shift issue that affects 100vh.
Browser support for dvh, svh, and lvh is now widely available across modern browsers.
