CSS fix for 100vh in mobile WebKit

[Olle (Bergkvist)]

I’m trying to apply this fix:

CSS fix for 100vh in mobile WebKit - Matt Smith

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

[Olle (Bergkvist)]

I’ve been able to make it work here with a much simpler example:
https://ollebergkvist.webflow.io/test

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

[vincent (Vincent Bidaux)]

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

[Olle (Bergkvist)]

Hi Vincent,

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

https://preview.webflow.com/preview/ollebergkvist?utm_medium=preview_link&utm_source=designer&utm_content=ollebergkvist&preview=04c6fbcb6b6a7c04cfc74e056ff788a3&pageId=5f4924f2672ab7abd9896ce8&mode=preview

[Olle (Bergkvist)]

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.

[nyc (Ben)]

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