Small, large, and dynamic viewport units

Updated

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

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. 

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.

Related articles