Streaming live at 10am (PST)

100vh full height bug on mobile and ipad

Hi community,

I know this has been a known issue for mobile browser but I couldn’t find a way to fix it. Basically I’m setting a 100vh section with a background image. It works well on desktop but when I tested it on my phone, there is a small amount of background image below the fold. I tried to enter the custom css and javascript code below but still didn’t work. Can someone help me with this?

Here’s the code I used:

.homepage_container { height: 100vh; height: calc(var(--vh, 1vh) * 100); }

< script>
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty(’–vh’, ${vh}px);

// We listen to the resize event
window.addEventListener(‘resize’, () => {
// We execute the same script as before
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty(’–vh’, ${vh}px);
});

And here is my preview link: Webflow - Victor's 2022 Portfolio