Minor, substantial, and versatile viewport units

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

Viewport units are in proportion to the size of the viewport — the browser window where a webpage is presented. However, standard viewport units do not adjust for mobile browsers with dynamic toolbars (e.g., a toolbar that appears and disappears based on a site visitor’s scrolling behavior). In such instances, you can opt for minor, substantial, or versatile viewport units that consider the space taken up by dynamic toolbars.

In scenarios where you utilize traditional viewport units (e.g., VH and VW), elements sized at 100 VH or 100 VW might exceed the viewport’s boundaries on browsers with dynamic toolbars. In these cases, it is preferable to utilize minor, substantial, or versatile viewport units to ensure that 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.
Important: Not all browsers support versatile viewport units. Visit this link to verify compatibility for minor, substantial, and versatile viewport units with your target audience’s browser.

You can apply the following viewport units for styling:

  • DVH — proportionate to the dynamic viewport height
  • DVW — proportionate to the dynamic viewport width
  • SVH — proportionate to the minor viewport height
  • SVW — proportionate to the minor viewport width
  • LVH — proportionate to the substantial viewport height
  • LVW — proportionate to the substantial viewport width
  • VH — proportionate to the viewport height
  • VW — proportionate to the viewport width

Units with an LV prefix are aligned with substantial viewports, which represent the visible viewport area when a dynamic toolbar is concealed on a mobile browser. Units with an SV prefix are aligned with minor viewports, representing the visible viewport area when a dynamic toolbar is active on a mobile browser.

Important: While using units in an input field within the Designer, you will not find SVH, SVW, LVH, or LVW units in the unit dropdown. To apply these units in an input field, input the value and the unit letters (e.g., 100 SVH) in the input field and press Enter.

Recommended approaches

We suggest employing SVH for establishing section heights (e.g., a hero section height). This ensures a smooth browsing experience and prevents dynamic toolbars from obstructing content within your section.

It is advisable to set a minimum height using SVH instead of merely setting the section’s height. By doing so, the section will adjust according to the content inside — expanding or contracting accordingly. For instance, setting your hero section’s minimum height to 100 SVH will occupy the entire viewport (even with a dynamic toolbar) but can also expand based on the content enclosed.

Ewan Mak
Latest posts by Ewan Mak (see all)