Sections overlapping in mobile and having 0px heights

Redesigning my site for mobile and having all sorts of issues with sections overlapping one another in mobile, and having 0px section heights which cannot be altered.

I have gone and checked padding to make sure there is no extra large pixel sizes outlined which might be causing the issue.

Any other ideas for fixing this issue? Thanks in advance.

  • Ensure that sections and containers have proper width and height properties defined (e.g., 100% for width and auto or min-height for height).
  • Avoid using fixed pixel heights for mobile sections; instead, use relative units like em, rem, or percentages.

Thanks for the reply, have checked the above and have setup properly.

I have just noticed that the sections I’m having difficulty resizing in mobile are section grids rather than sections. Should that be an issue?

Essentially two ‘sections’ are overlapping sitting one top of the other in mobile spec and I can’t seem to solve the issue.

Bumping this.

See attached 2 x screenshots showing the 2 sections which are sitting atop of one another.

It’s almost as if the mobile page height is stuck and can’t push the content down.


Just adding to this, if I hide my footer both of the problem sections have a 0px height which cannot be changed.

I had the same issue on tablet and mobile views, used section grids as well and had the height set to fixed. I did change the height to have min max values on desktop before the fix below.

On tablet, the issue resolved itself after I moved layers up and down a few times from the more actions menu.
This did not work on mobile, but what did was hiding all layers except the problematic one, then arrange > bring forward, hide the layer and then show the layer.

Hope this can help someone else!