Fullscreen Modal – Solution for the 100vh issue on Mobile Web Browser
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.
We miss comments too!
Right now, Made in Webflow doesn't offer all of the same functionality that Showcase did, like the ability to leave comments. But don't worry: We're working to bring comments back as soon as possible!
As always, we'd love to hear your feedback! Click the link below to take a short survey about Made in Webflow.