Understanding and Using Viewport Units in Webflow for Responsive Design

‍Responsive web design is essential for providing a smooth and optimal user experience on your site, regardless of the type of device being used. Whether your visitors are browsing on a smartphone or a large computer screen, it is crucial that your site adapts perfectly to all screen sizes.

When creating your website with Webflow, you can achieve this level of flexibility by using different viewport (CSS) units. The "viewport" refers to the size of the browser window where your web page is displayed. However, a challenge arises with certain mobile browsers that feature dynamic "navigation bars". These navigation bars appear and disappear depending on how the user scrolls the page, which can disrupt the display of your website if your CSS uses VH or DVH units.

Fortunately, to avoid this issue, Webflow offers specific viewport units!

What are viewport units on the web?

Viewport units are determined based on the size of the screen. The classic viewport units are VH (Viewport Height) for height and VW (Viewport Width) for width. However, these units do not account for the dynamic navigation bars that mobile browsers have. If you use these units to set elements to 100 VH or 100 VW, they may overflow the viewport on browsers with dynamic navigation bars (especially on mobile, for the responsive part of your website).

To avoid this, it's best to use "min or max" viewport units, along with "dynamic" units to ensure that all elements on your site remain perfectly visible.

List of viewport units:

• DVH — relative to the dynamic viewport height
• DVW — relative to the dynamic viewport width
• SVH — relative to the small viewport height
• SVW — relative to the small viewport width
• LVH — relative to the large viewport height
• LVW — relative to the large viewport width
• VH — relative to the viewport height
• VW — relative to the viewport width

Units with an LV prefix correspond to large viewports, meaning the viewport area visible when a dynamic navigation bar is hidden on a mobile browser. Units with an SV prefix correspond to small viewports, which is the viewport area visible when a dynamic navigation bar is present on a mobile browser.

How to use these units to create a responsive website?

In Webflow, when entering units in a field, you will not find the units SVH, SVW, LVH, or LVW in the dropdown menu. To use them, simply type in the value and the letters of the unit you wish to use (for example, 100 SVH) in the input field and hit Enter.

Best practices for using viewport units

It is advisable to set a minimum height using SVH, rather than simply defining the height of your section. This way, the section respects the content inside and adjusts accordingly. For example, if you set the minimum height of your hero section to 100 SVH, the hero section will occupy the entire viewport (even with a dynamic navigation bar) but can also expand based on the content inside.

Bonus: how to easily modify all your CSS classes with a DVH or VH value from the Webflow designer?

1. Open the Webflow designer
2. Open the Style Manager
3. In the "Search Classes" bar, type "DVH" or "VH"
4. And there you go! You have now identified all the classes in your Webflow site that use DVH or VH units.

Conclusion on best practices with Webflow

Key points:

1. Never set a fixed "height" size for your section
2. Instead, use "min height" values
3. Prefer using dynamic size like SVH

By understanding and correctly using viewport units in Webflow, you can create a truly responsive web design, providing an optimal user experience across all devices. Remember to test your site on different browsers to ensure compatibility of these units with the browser of your target audience.

Additionally, here is an excellent video explaining best practices by Webflow