Hi,
I added the features element to my site and now get the issue of horizontal scrolling when I don’t want it. I have tried the hidden overflow on the body element however that stops the vertical scroll. I don’t want to use custom code if possible (paying for it)
Any help would be great as there must be something obvious I’m missing that’s changed.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Browsers will scroll horizontally when they cannot fit the content you’ve created. The main thing to check is your element widths, min-widths, and content that cannot wrap.
In your case it’s your Section element which has 100% width, plus 5rem on left and right margins. Together this requires a width of 100% + 10rems.
Hey there,
Design and even more these kind of problems are my everyday challenges as a frontend developer, I suggest you to always use an element as a container and use it in every section and inside this container place all your elements, so you just need to adjust this container in every breakpoint(screen size).
The solution for your problem is in the element ‘section’ it has 100% in its width, change it to auto how I show you in the following image:
