Hey guys,
So i’ve noticed the 100vh rule I have set on the nav container works perfectly on desktop. But on mobile it seems to not. There is a small amount of scrollable space and I can’t work out why!
The thing that really doesn’t make sense is on desktop when i grab the window and pull it down far smaller than my iPad it still works perfectly.
Any help would be greatly appreciated.
Live site: http://biker-co.webflow.io/workshop
Hi, i have experienced this before, what i did was on the mobile view i Changed height values from 100VH to 1000PX… hope this helps, i think chrome has a bug of some-sort. Also if overflow is hidden on the body it might deny scroll on android devices.
Unfortunately this doesn’t help me in this case.
Thanks for the help though 
First “the problem” - 100vh on mobile (True to July 2019) related to device-screen-size (And not to the “available size”)
In other words ==> address bar in view = crop area
fill-available not supported)<style>
.hero-without-scroll-on-mobile{
min-height: -moz-available; /* WebKit-based browsers will ignore this. */
min-height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
min-height: fill-available;
}
</style>
Try to use this:
Amazing @Siton_Systems, thank you!
I can seem to get this to work. The hero still has a little bit of scrollable area. - Safari, iPhone XS
Hey all, I got this figured out from another thread, but this link talks your though fixing the issue that gives the results I wanted.
Hey Loren,
Are you able to link me to the thread that helped you with this?
Thanks mate.
James
I’m having trouble tracking down the post I was referring to. Not sure why I didn’t link it. However, try pasting this into your custom code.
CSS
<style>
.containername {
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
}
</style>
Javascript
< script>
// Fixing 100vh for mobile
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty(‘–vh’, ${vh}px);
< /script>
(not sure why I cant paste formatted javascript in here but just check that opening and closing script tag. That space after each “,” breaks it so i can paste it here.)
If that doesn’t work hit me up and I can take a look at your file. Good luck!
Hey Loren,
Thanks heaps for replying, I appreciate it. Here’s my read only link. Was I meant to change the ‘.containername’ bit, I left it and it didn’t work and then I changed it to the columns and it also didn’t work.
Hope I put the CSS/JS in the right sections in the page code.
Thanks.
It all seems right to me but it is hard to tell because I can’t publish the code from a read only link. That being said, you have to publish to the browser for Webflow to read custom code. When you view your project are you using the “Publish” button on the top right or the eyeball icon? You would need to use the “Publish” button. The only other real thing I could imagine it may be is try wrapping your columns in a div container and using that for your custom code.
It’s not working unfortunately. Do I have the code in the correct sections? Have I labeled the class correctly? I think that’s where I’m going wrong here. Yeah, I am using the publish button too.
Thanks again.
Hey guys, I have figured this out. I just about tore my hair out doing it, but I’ve got it. Just thought I’d pop the instructions below for anyone else in the future!
Pop this bit of CSS into the ‘head’ part in the custom code tab in project settings:
< style>
.left {
height: 100vh; /* Fallback for browsers that do not support Custom Properties */
height: calc(var(–vh, 1vh) * 100);
}
< /style>
Just remember to change ‘.left’ with whatever the container you’re targeting is called.
And put this bit of Javascript into the ‘footer’ part in the custom code tab in project settings:
< 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);
});
< /script>
If you want to read up on what it all means, check this link out:
Thanks to everyone in the community for their help!
James
ALSO, REMOVE THE SPACES BETWEEN THE SCRIPT AND STYLE TAGS I’VE HAD TO ADD SO THEY CAN BE POSTED HERE ON THE FORUM
Hey guys, anyone succeeded with this? I’m stuck, it’s not working for me.
@James_Fazzino any idea?
This appears to be an ipad problem rather than a standards problem? If so it can be ignored as no-ones going to be buying Apple hardware until they go back to x86 in 5/10 years after fucking up again. The only reason for Apple was they used proper components for a time.
It’s not an iPad problem, it’s a browser problem.
Hey mate, you didn’t copy the correct bit of code I placed above into the HTML embed. Did you copy and paste the JS into the custom code tab in project settings?
hi James,
Its not working for me neither… and I’m not sure to understand what you mean by remove space between script and style tag.
Also does it matter if its not a container, neither a Div block? Its a section…
And from the post you’ve added they wrote ‘’- -vh’’ and not ‘’–vh’’ … does it matter?
Regards,
-CC
@ACarchitecture - Webflow converts all class names to lowercase on elements when published. So you should target the lowercase class name in custom code.
