Small, large, and dynamic viewport units

Use small, large, and dynamic viewport units for responsive design on mobile browsers with dynamic toolbars.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

Viewport units are relative to the size of the viewport — the browser window in which a webpage is displayed. However, regular viewport units don’t account for mobile browsers with dynamic toolbars (i.e., a toolbar that dynamically hides and becomes visible based on a site visitor’s scrolling behavior). In this case, you can use small, large, or dynamic viewport units which account for the space taken up by dynamic toolbars. 

If you use regular viewport units (i.e., VH and VW), elements sized at 100 VH or 100 VW may extend out of the viewport on browsers with dynamic toolbars. In this case, it’s better to use small, large, or dynamic viewport units, so your site’s elements remain fully visible. 

2 mobile browser windows shown side-by-side. On the first, VH units are used, and the bottom element is cut off by the toolbar. On the second, DVH units are used, and the bottom of the element is shown above the toolbar.
Note: Not all browsers support dynamic viewport units. Check here to ensure that small, large, and dynamic viewport units are compatible with the browser of your target audience.

You can style with the following 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, which is the visible viewport area when a dynamic toolbar is hidden on a mobile browser. Units with an SV prefix correspond to small viewports, which is the visible viewport area when a dynamic toolbar is present on a mobile browser.

Note: When using units in an input field in the Designer, you won’t see SVH, SVW, LVH, or LVW units in the unit dropdown. To use these units in an input field, type the value and the unit letters (e.g., 100 SVH) in the input field and press Enter.

Best practices

We recommend using SVH when setting section heights (e.g., a hero section height). This ensures the browser scrolling experience remains smooth and prevents dynamic toolbars from cutting off content in your section.

Note that it’s best to set a minimum height using SVH, instead of just setting the section’s height. That way, the section will respect the content inside — and grows or shrinks accordingly. For example, if you set your hero section minimum height to 100 SVH, the hero section will take up the full viewport (even with a dynamic toolbar) but can also grow depending on the content inside.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top