Separate sections overlapping at smaller breakpoints

Design help General
1

Hi, I designed a hero section that works fine on desktop and tablet. But on landscape or smaller, the section seems to disregard the images completely. The bottom edge of the section actually aligns perfectly with the top edge of the images.

I removed any type of min or max height (at the breakpoints where the problem happens) so it doesn’t have that constraint.

Please navigate to the ABOUT page.

Thanks for any help. Cheers

Here is my site Read-Only: Webflow - Portfolio v1

[2]: https://university.webflow.com/article/sharing-your-sites-read-only-link![25|690x384](upload://79rS2WYtQ81Jol82VXq1S34UTBa.png)

40
40486×744 297 KB

2

I partially solved it by extending the bottom row of the grid on the landscape/mobile views to 100vh. It looks fine in the designer, but doesnt work 100% on the published site.

4

@rolomathias, first off, your Navbar shouldn’t be nested inside your about container. It should be in its own section div and then sized for it.

2nd, you should have more grid elements (i.e. columns and rows) for what you want to do. Keep in mind when you use vw and vh on mobile you will get weird results. Best to stick with defined values or Auto.

3rd, when using Grid make sure your images are in their own div block for proper alignment and IX. This will also allow you to keep things better organized throughout.

4th, try not to use 100vh on mobile. You will have to add a code patch for it to work on Safari and iPhones.

Try those suggestions. If still having an issue, lmk.

1 Like
5

Thanks for the tips, Brandon. I restructured things to include more divs and, therefore, more organization. Also, instead of using Grid, I switched to Flexbox. But, still doesn’t work on mobile once the contents switch from horizontal to vertical positioning. It seems like the image divs aren’t recognizing the height of the images at all. They seem to have no height. I played with Auto and using 100% for height but nothing responds :man_shrugging:

00
00516×521 130 KB

7

I noticed that the divs behave properly, in regards to height, when I remove Absolute positioning. So, I tried to achieve the same layout with AP but wasn’t able to make it exact.

1 Like