Streaming live at 10am (PST)

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:

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:

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.