Section height unresponsive and overlapping in mobile

[ansa (Ansa Stamper)]

Hi everyone!

I’ve been optimizing my site for mobile for the past week or so and I’ve run into a lot of problems with section height. Not sure what I did wrong, but somehow in flipping back and forth between breakpoints, I started to get all this extra white space and the bottom of each section in desktop, and overlapping sections in mobile. There also seems to be blank space between the sections instead of the sections stacking properly with changes in height values. I’ve tried setting a max height, setting height to auto, setting everything to auto/none, etc. and nothing has resolved the problem. I know I’m probably missing something relatively minor but I can’t figure out what it is and nothing I do seems to help. Wondering if maybe it’s a bug? Any ideas of what might be going on?

---

Here is my site Read-Only: https://preview.webflow.com/preview/lightmark-demo?utm_medium=preview_link&utm_source=designer&utm_content=lightmark-demo&preview=56837910d7b1d358503a0ba295274b82&mode=preview

And here are a few screenshots:

[mikeyevin]

Your curved images seem to be the culprit, as they all have huge negative positions

Because these are position: relative they will still take up their original space within the structure of your website. I’d look into making some adjustments so they’re position: absolute within a position: relative container so they can sit nicely at either the top or bottom without messing with the flow of your other objects.

https://www.loom.com/share/9185c1dcf52c4bc381291db7f8c87de1

[dennyhartanto]

Just to add, your content block has a max-height of 1200px; thats why the next section overlaps.

You can just remove the max-height.

[ansa (Ansa Stamper)]

Thank you so much! That worked.