Mobile VH does not take into account native browser UI

Design help General
#1

Hey team,

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?

https://preview.webflow.com/preview/adam-wouldes?utm_medium=preview_link&utm_source=designer&utm_content=adam-wouldes&preview=919d878574db625848ba2fa361f584d0&mode=preview

#2

You’d have to set the height manually using javascript.

use

var windowHeight = $(window).innerHeight() || document.documentElement.clientHeight;

to get the visible viewport’s height, and then use

$('.class-name').height(windowHeight);

to set the actual height. Replace .class-name with the class you’re using in Webflow

#3

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.

#4

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!

#5

In this case your published URL is very important. If you share it I will look. If not good luck.

#6

No problem - www.adamwouldes.com

Thanks for your help.

#7

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.

Here is an example using flexbox on the body Head Body Footer Flex (webflow.io) and a read only.

1 Like