My content is overflowing outside of the Hero Stack - I am having problems finding which element is culprit (my guess is the slider?) If someone could help that would be much appreciated. The site is https://www.genesisnestboxes.com/
Here is my site Read-Only: https://webflow.com/design/genesisnestboxes?utm_medium=project_link&utm_source=designer&utm_content=genesisnestboxes&workflow=comment&pageId=6154320fbefa1ad1f01c2288
(how to share your site Read-Only link)
Hi there,
When working with a Hero Stack, overflow issues can cause unwanted horizontal scrolling on your page. Here’s how to identify and fix these issues:
The X-ray mode in Canvas settings is your first diagnostic tool. Enable it by clicking the Canvas settings icon and selecting “X-ray mode.” This will highlight element boundaries in blue, making it easier to spot elements that extend beyond their containers.
To pinpoint the specific element causing the overflow, scroll through your site in the Designer while moving your cursor along the right edge where the extra whitespace appears. The element highlight will show you which component extends beyond the intended boundaries.
Once you’ve identified the overflowing element, select its parent container and navigate to the Style panel > Size settings. Set the Overflow property to “hidden” to contain the content within its boundaries. This prevents child elements from extending beyond their designated space.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Thanks, I tried this already and it doesn’t solve the issue - thank you anyway. It’s probably something obvious. Can anyone else help please?
here is few things you have to change for overflow issues
1- remove white-space: nowrap; on class .w-slider-mask
2- remove .slider {height: 100%;}