I’m testing my website on an iPhone 4s and the hero section becomes EXTREMELY tall and covers the rest of the website!
I don’t know if there’s any way to explain this better but I just keep scrolling and the background image repeats.
This glich happens on both portrait and landscape mode.
https://preview.webflow.com/preview/stephlucente?preview=a7330ae3b2e2c7a7bcd3fcec8280c410
Do you mean you’ve tested it on 4 and 5 and only the 4S behave like this?
Preview link doesn’t work.
The site isn’t scrollable, did you put overflow:hidden on the body element?
When you put overflow:hidden on the body element, you have to pay a beer to all forum members, it’s a new rule we came up with for @jdesign 
I guess I’ll have to pay those beers!
The problem is that I used overflow:hidden because the site used to scroll horizontally and I can’t find in webflow an option to limit overflow:hidden to the y axis only.
Any ideas?
https://preview.webflow.com/preview/stephlucente?preview=undefined
You put all the content of which you want to hide the overflow in a section element, then overflow:hidden that section.
It’s going to be a fun night at the Webflow Pub!
Fixed by hiding the footer overflow!
Thank you Vincent, you deserve a cold one! 
edit: checking now on 4s
Yep come back with more on the 4S.
The problem persists on iPhone 4s, both Safari and Chrome have been used during the tests.
Hypothesis:
-hero section vertical size set on 100vh
-hero section background image too large
-gremlins
The preview link is the following:
https://preview.webflow.com/preview/stephlucente?preview=undefined
Also the menu button position is not the same I see in the designer in mobile mode (4s size)
Or do you test only on iphone4S?
I can only test real mobile devices behavior on iPhone 4S atm
The site behaves correctly on Web based responsive testers (Screenfy).
Hi @stephlucente, I think the issue is because you have three containers in the Hero section, and one of containers, the discovery container has an absolute position relative to the body element, anchored to the bottom of the page with an offset of -35px:
This causes the Hero section to be as long as the entire body, and you have the background image set to tile.
I remove the discovery container from the Hero section, and put that as your last element in the Navigation tree. I would also check your background image and set that to not tile:
After making those changes, let us know so we can take a look. One more question, is there a specific reason you are using 100vh height compared with 100% height on the hero section?
Cheers, Dave
Hello Dave, and thank you for your help.
I’ve updated the site following your suggestions and tested it both on iPhone 4s (safari and chrome) and on a Nokia Lumia 520 (internet explorer).
-iPhone: the page still scrolls down indefinitely but it’s not showing the background image anymore, it’s white now.
-Nokia Lumia: the page behaves correctly but there are a few glitches (i.e.: the menu button is positioned outside the navbar)
I’m using 100vh instead on 100% because the section doesn’t fill the viewport as intended (attached image).
Did I set anything wrong?
Hi @stephlucente, there might be a couple things to update still, but try this next, set your body height to 100% and then set the section height to 100% instead of 100vh.
After changing that, let me know and I will take another look. If you set section height to 100%, it will not fill the viewport unless the body also has 100% height 
Cheers,Dave
100% body & hero section done!
Works like a charm as expected!
iPhone glitches still there (but I guess body size wasn’t supposed to fix that 
)
Dude…I never agreed to that…did I? 
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.
