Help removing horizontal scroll
I coded this website from a Frontend Mentor Challenge. I cannot get the horizontal scroll to go away. I have tried overflow: hidden. What am I missing? Or is there a better way to create my ::before elements so I don't have this scroll?
https://github.com/Stephanie-Dennehy/Workit-Landing-Page
https://stephanie-dennehy.github.io/Workit-Landing-Page/
GitHub
GitHub - Stephanie-Dennehy/Workit-Landing-Page
Contribute to Stephanie-Dennehy/Workit-Landing-Page development by creating an account on GitHub.
5 Replies
Few pointers, avoid using strict heights/widths if you can, don't set font sizes in px but rather rem so they respect users font size.
You have some before elements you position absolute. hero:before and features:before that get pulled from flow and you also scale them so they are overflowing. You can put overflow hidden on the relative parent but I think it breaks the design you might need to rethink how you do the backgrounds.
Also I would be careful using %'s all over as they can not be as responsive as you might think and can only be a % of the parent if it has sizing.
as always #depends, it would help if you had a live example of it for future too. Codepen is really nice for this and helps people get right into your issues.
I also would recommend learning Grid 😄 a lot of these flex columns could just be grid and remove lots of code.
Thanks. I started this one before Kevin's responsive design course. I was just finishing up the overall design and then going to rework some of those pixel values. But I was trying to get through my scroll issue first!
Yea its those ::befores doing it, I couldn't really see what they were even doing, I assume the round bg's
Yes it is for the rounded bgs. Is there a better way to create those so I'm not using the ::before? I saw a tutorial that used that method, but I'm open to other suggestions.
It should work you just need to make the relative parent
overflow: hidden; the other option would be a SVG that fit without.