In CSS, the viewport is the area of the browser window that is used to display the webpage. The size of the viewport can be affected by the size of the device being used to view the webpage and the zoom level. The viewport-height (VH) and viewport-width (VW) units are often used to create responsive designs that adjust the layout based on the size of the viewport.

Mobile browsers have introduced dynamic toolbars that can appear or disappear while a site visitor scrolls; this can cause fixed elements to be cut off and affect the overall quality of a site’s visitor experience.

Today, we’re excited to release new CSS viewport width-and-height units (small, large, and dynamic) to provide designers additional flexibility when designing websites for site visitors using mobile browsers and interacting with dynamic toolbars. These new CSS units will give you the ability to ensure that fixed elements are not cut off by a toolbar on mobile devices. To utilize the new CSS viewport units, just head over to the Style panel on the Designer, and also be sure to check out our latest Webflow University article to learn more.

‍