{"id":4399,"date":"2024-04-15T02:08:17","date_gmt":"2024-04-14T18:08:17","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4399"},"modified":"2024-04-15T02:08:17","modified_gmt":"2024-04-14T18:08:17","slug":"minor-substantial-and-versatile-viewport-units","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/minor-substantial-and-versatile-viewport-units\/","title":{"rendered":"Minor, substantial, and versatile viewport units"},"content":{"rendered":"\n
\n

Viewport units are in proportion to the size of the viewport \u2014 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. <\/p>\n

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. <\/p>\n

\n
\"2<\/div>\n<\/figure>\n
Important:<\/strong> 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<\/a>.<\/h6>\n

You can apply the following viewport units for styling:<\/p>\n

    \n
  • DVH<\/strong> \u2014 proportionate to the dynamic viewport height<\/li>\n
  • DVW<\/strong> \u2014 proportionate to the dynamic viewport width<\/li>\n
  • SVH<\/strong> \u2014 proportionate to the minor viewport height<\/li>\n
  • SVW<\/strong> \u2014 proportionate to the minor viewport width<\/li>\n
  • LVH<\/strong> \u2014 proportionate to the substantial viewport height<\/li>\n
  • LVW<\/strong> \u2014 proportionate to the substantial viewport width<\/li>\n
  • VH<\/strong> \u2014 proportionate to the viewport height<\/li>\n
  • VW<\/strong> \u2014 proportionate to the viewport width<\/li>\n<\/ul>\n

    Units with an LV<\/strong> 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<\/strong> prefix are aligned with minor viewports, representing the visible viewport area when a dynamic toolbar is active on a mobile browser.<\/p>\n

    Important: <\/strong>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<\/strong>.<\/h6>\n

    Recommended approaches<\/h2>\n

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

    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 \u2014 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<\/em> based on the content enclosed.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use small, large, and dynamic viewport units for responsive design on mobile browsers with dynamic toolbars.","protected":false},"author":2,"featured_media":4400,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-4399","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4399","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=4399"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4399\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/4400"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}