I’ve been congratulating myself for successfully migrating my whole site to Foundry, but have come across a real stumper. On this page https://www.wilsons.school/prospectus/ ‘From the Headmaster’ and the accompanying image badly overlap the section above when viewed on iPad in landscape. In portrait it is fine. I have tried using Margins stack to correct it, but iPad in landscape uses the desktop breakpoint, and I don’t want to ruin the desktop appearance just to correct this glitch on tablet. I don’t understand why, if the landscape iPad is using the desktop layout, it fails to format the page the way a desktop browser does but squashes these elements together. It doesn’t appear to be happening elsewhere AFAIK, certainly nowhere else on this page. It’s not as if I am using Overlap stack or anything like that. What is occurring?
Your issue is actually affects your desktop breakpoint. If you have a wide, but short desktop screen (like an iPad) or a window sized to be wide and short, you’ll see the issue there as well. It’s not really related to the iPad itself, but it made it easier to spot.
Gosh you’re right. Is there any way round it…??
It really shouldn’t be doing that by default. It’s almost like you have that ‘From the Headmaster’ section to stick to the bottom of a 100% view height area. It should really be scrolling to allow you to see more content. I can’t tell from your live website what you’ve setup.
Do you have anything set to 100% view height?
It does it at the tablet screen size too.
Something to do with the “welcome” section set to a fixed height and parallax scrolling the background?
Impressive site! I like it. Headmaster looks so young or maybe I am so old now.
Thanks for the input (and the kind words!!) — it has helped me reach a workable compromise, by rejigging the contents of the Welcome section above (which is a hero banner). iPad in landscape now looks OK though the issue is still there if you have a browser that is very shallow. Just hope there are not too many users out there who use that kind of setting.
I can simulate the same problem on my website when setting the banner to hero. I make sure the banner is no higher than the pixel height of a landscape iPad tablet.
As i have hero disabled at mobile level, the banner is set to a fixed height there.
Quite right. Hero banner seems to be responsible. I have switched it off, chosen flexible banner height and adjusted the margins. It now looks reasonable in most formats as far as I can see. Many thanks for your help!
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.