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?
var windowHeight = $(window).innerHeight() || document.documentElement.clientHeight;
to get the visible viewport’s height, and then use
to set the actual height. Replace .class-name with the class you’re using in Webflow
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.
Thanks @webdev, apologies I have added the read only link above or you can view it here
@basvanstraaten thanks I will try this and let you know!
In this case your published URL is very important. If you share it I will look. If not good luck.
No problem - www.adamwouldes.com
Thanks for your help.
Here is an example using flexbox on the body Head Body Footer Flex (webflow.io) and a read only.