overflow-x on the body element does not work
Hey!
I have been working on this project:
https://64401877a3e55700863fec85--super-daffodil-7196e0.netlify.app/
(You should view it in responsive mode at 375px preferably to see the issue)
I started to work on the mobile view first, where I have a hero section that has two decorative svgs that are positioned absolute where their parent has a position relative, and when I finished I noticed that I have horizontal scrolling, I have tried to set the body width to 100% and set overflow-x: hidden on the body but the horizontal scrolling was still there, the only solutions I found is to set both body and HTML property of overflow to hidden, or wrap everything inside the body in a div and give it overflow: hidden.
My question is why this behavior occurs because I have always thought that if I set overflow-x: hidden on the body or the HTML element with hide any overflowing content
Thanks for the help 🙂
2 Replies
Setting overflow-x: hidden on body is a true hacky way to do things period. You should always just fix the overflow issue. What you actually want to do is probably have overflow: hidden; on the parent that holds the svgs or a wrapper for it.
SideNote: you should make things responsive down to 320px (280px if you can). The most common phone size is still 360px so you are not even hitting it with 375px (I blame FEMentors for teaching this bad habit hahah)
I think so but I really want to know the reason behind that behavior, so any idea why it is acting that way?
For the viewport if it was a project of my own, I would but I am just following the design from frontend mentors 🙂