Confusing Overlap Issue

I have a problem with the hero area of my homepage, on the tablet query only. The section below my hero section pushes up and overlaps, rather than stacking end to end. The issue seems to have started after I applied some minimum height styles to the sections that use vh units. That doesn’t really make sense but it’s the only thing I had changed before the issue popped up. I removed the min. height style but that did nothing. Any help will be much appreciated.


Working Link:

hello @Port_of_Folio,

You meant mobile portrait ?
I tried to use px values instead of vh and it looks ok. But I’m not sure we are talking about the same issue ?

Also, I find vh values for mobile breakpoints hard to work with, as Webflow imitates vw but not vh.

@Laurent_Hayoz thanks for checking it out. Yes, I guess it’s actually happening on all queries. Your screen shot also looks different (better) from what I’m seeing.

If you look at the attached image, I have the hero area selected. You can see the blue outline bounding box for “Hero Image” overlap with that white section just below. I can’t figure out why the two sections do not meet end-to-end.

You have to set both hero image & hero column 2 to height:auto and then adjust the padding from the inside element

EDIT : Oh and make sure you change those settings in the tablet viewport, so it affects all the smaller views.

@Laurent_Hayoz thanks!

I really wanted to keep those vert units on the hero image, so after reconstructing I discovered it was the next section below that needed the adjustment. It also uses vertical units (80vh) but the content inside was pushing it taller, causing the overlap. Once I set that section to “auto” like you suggested, everything fell back into place. Thanks for your help, it got me there!

1 Like

Glad I could help :smile:

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