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.
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.
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.
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.
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.