Overlapping content on mobile

[Conor_Maurice]

Hi All,

I’m having some design issues with content overlapping on mobile and tablet devices. If you switch to them you’ll instantly see what I mean.

Could anyone refer me to an article / help me fix this issue, please? Tried for hours to no avail.

Also, if you click the burger menu, it drops down really fast in a staggered way despite being set to ease in 800ms. Any ideas what could cause this?

Thanks for any advice!

---

Here is my site Read-Only: https://preview.webflow.com/preview/wdjc?preview=19e0e44e0db755bb4a6dc40808d9dd7a

[garymichael1313 (G.J.)]

Hi,

1. Set your “NavMenu” layer to Height: Auto. The size of 100% is not relevant because - 100% of what? It’s not needed, the content will give it a proper size. The close will be smooth

2. I don’t know what overlapping you’re referring to. Can you be more specific on which part? Or share a screenshot.

[Conor_Maurice]

Great, thanks for that. I just set it to 100% in the hope that it would fill the screen completely when opened.

in terms of the overlapping, you can see if it if you switch to the mobile version under the ‘about us’ and ‘production’ sections. Please see the screenshot.

Thanks

[garymichael1313 (G.J.)]

Oh did you get the overlapping fixed, or deleted the sections? I checked and didn’t see any content.

[Conor_Maurice]

Hi Gary,

Unfortunately not. It’s still happening within the about us section on mobile (image 1). Also, the ‘WhatWeDo’ section won’t resize properly on mobile (see image 2) and overlaps depending on the device used. Any ideas?

[garymichael1313 (G.J.)]

Yeah @Conor_Maurice, I see, but man I have to be the bearer of news - that’s the nested column effect. If you’re using columns, that parent one will work best if it’s set to “Inline” instead of block. I would not float these columns, just use inline - on the “Parent” column/layer.

[Conor_Maurice]

Ah great - thanks for the help again!