CSS fix for 100vh in mobile WebKit

I’m trying to apply this fix:

To create designs with consideration to the menu on IOS devices, creating uniform designs no matter what device is used.

I’ve applied the customs code:

body {
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;

html {
  height: -webkit-fill-available;

But the elements (Next / Previous button) still appear below the fold?

Looks like this on a actual device:

Here’s a demo example: https://preview.webflow.com/preview/olles-dapper-project?utm_medium=preview_link&utm_source=designer&utm_content=olles-dapper-project&preview=fa21440b6618015db8ed3379e89fb55f&mode=preview

I’ve been able to make it work here with a much simpler example:

I guess there’s something interferring with the custom code in the other example.

Can’t find an element at 100vh in inspector… Can you share your read-only link?

I wrote an almost similar solution here: https://sbx.webflow.io/100vh-viewport-safari-fix

Hi Vincent,

Thanks for offering to help out, please find the read-only link here:


Hi Vincent,

Any chance you had the time to look at this? I can’t seem to find why it’s not working in my example.

Can anyone help me with this? I put the following in my head code and nothing happened.