I’ve designed a landing page whilst I work I the rest of my portfolio, however, I am running into a viewport height issue on tablet and mobile.
I have a container set to 90vh, with some text aligned to the top, and links aligned to the bottom (flexbox, vertical space between).
The issue is on tablet and mobile - the links cannot be seen on the first load because the VH is accounting for the device screen size, rather than the visible viewport height.
I’ve seen a few other posts around this but I cannot seem to find a simple fix for this, any ideas?
Posting to this category - the guidelines require a read-only link and if you have published the site (webflow.io or otherwise) a URL so it can be inspected in a browser. Additional info about the devices and models where you experience an issue is very helpful.
Your height is 100vh on div.cover-page-content and IOS and some other mobile devices lay the address bar over the viewport, thus the hidden nav. Reduce your vh or use flexbox to control the positioning of the child elements. You can always use the JavaScript method too.