iPad landscape issue

Hi - I’m working on a site which has the following issue when viewed on the iPad in landscape mode; I have used 100vh for height with a few divs within the 100vh section. In iPad landscape mode the height of the browser is small so the bottom divs overflow onto the next section. Is there a way to force the section to push the next section down past the div rather than just stay at 100vh and let the content overflow? Hope that makes sense - click the PAGE link if you’re viewing the site to take you to the actual test page (if I’ve done the link below correctly - someone tell me if I haven’t!


Here is my public share link: https://preview.webflow.com/preview/countryquarter?preview=edf435632ea837a3b1fe48db048c5927
(how to access public share link)

Before I can offer advice on how to fix this, first I must ask is there a reason you have that section set to overflow:scroll? That is going to cause a lot of issues on both desktop and mobile as far as being able to scroll through the page. I would suggest giving it a minimum height instead of using 100vh. I’d be glad to help you come up with some ideas as far as structure once I know what you are going for.

1 Like

Hi - thanks for the reply - I don’t think the section is set to overflow scroll anymore - I did set that quickly last night to see if it would provide a work around but as you say - it just causes problems. I have re set all to Overflow:visible. All I’m trying to achieve is the section contains the divs within - for example if you take the top section with a wooden background - in all the preset modes - desktop, iPad vertical etc it displays as it should, you can see a bit of the background after the last div. On an iPad in landscape however that bottom bit of wood disappears, I’m thinking it’ll be due to there being too much content to fit on the smaller screen area so it ‘overflows’ into the next section making it look messy. I just need a way to get the sections to display as they should - each one with a little bit of space top and bottom to separate it from the next one - it’s doing what I ask it to - filling 100% of the vertical area which on everything other view option seems to work OK, just no on the iPad when view Landscape. Hope that makes sense and thanks again for the offer of help - much appreciated. I’ll try the min height - see if that works.

Dave - genius, min height has solved the issue - not a full on coder myself so this was giving me grief - makes perfect sense now - thank you

There are still issues with the overflow on your site but I am glad you got that one part sorted. May I ask, why are you using 100h instead of auto? 100vh will force the height of a div to be a set amount, which will change from browser to browser, setting the min width will help but it is still a static property. The best way to keep your site responsive with no worries is to set your section heights to auto. That way they will scale to fit the contents on all devices automatically.

2 Likes

Dave - ended up setting all heights to auto - this has rectified the issues - I think I just got a little over excited by flex box and wanted to utilise it. Thanks for your help :wink:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.