Marketplace
Made in Webflow

Fullscreen Modal – Solution for the 100vh issue on Mobile Web Browser

926 views
site profile thumbnail

Description

Viewport units in CSS are great, if you want to style an element to take up the full screen height – just set height: 100vh. Sadly, the 100vh unite breaks your design on mobile browsers that makes it nearly useless. When in a mobile browser (Chrome + Safari) the address bar is visible, the bottom of the screen gets cut off since mobile browsers incorrectly set 100vh to be the height of the screen without the address bar showing. A Better Solution: use height 100% instead of 100vh. In this sample project you will learn how to set this up!
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.
mobile friendlyfullscreenmodal100vhcssnavigationviewportfull-heightfullheightfullscreen menu

More by Philipp Roth

See profile
View details
Text reveal masking on scroll
110
213