Browser Resize Elements Overlap

There appears to be a bit of overlap on all the elements throughout my site when resizing my browser. All the elements are with containers, and not sure why this appears to be happening.

Does anyone have any suggestions regarding how to fix this issue? Appreciate the time, and looking forward to hearing from you.

Link - https://preview.webflow.com/preview/trytootles?preview=2eff3d1cfdee00cffd0a22814633a76c

Best,
JL

Hi @jose_llorens

It is difficult to say for sure without knowing what page this issue is happening.

However after looking at your project a bit I think I found the culprit. You are currently using defined heights such as 100vh. This is great as long as the content never exceeds this dimension.

However, if the content (e.g. text, images, etc) exceed this height, the content will spill over into the nearby sections. You can avoid this by keeping the height of your sections to Auto and using margin/padding to create negative space and set the height.

I hope this helps. :slight_smile:

1 Like

Got it! Thanks for the help dude. I had a feeling that it had something to do with that 100vh height, but wasn’t for sure. Appreciate this.

1 Like

Still having a bit of issues here actually. Primarily with the home page…

Any chance you could get into a bit more detail here?? Would really appreciate it.

@jose_llorens

Sure I’d be happy to take another look. I am not seeing any overlapping on the home page when I resize the browser window, though. I am also unable to find the section shown in the image.

Can you please provide more page/element context? :slight_smile:

That’s my fault! We’ve done some restructuring around the site so those sections in the image are now separate pages.

At this point, I’m just trying to see if there are any better alternatives to the solution I did by setting fixed heights instead. Also, you’ll notice on the hero section on the “Giveback” page how it responds perfectly when you resize the browser. Can’t figure out why that section works so well compared to everything else.

@jose_llorens

One other option you can use is to set a minimum height of 100vh (any appropriate height) and then set some margin / padding in place as a boundaries. This way your sections will never shrink smaller than the content.

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