How to remove a horizontal scroll bar?
Hi this is about https://chrisbarin.com/ I have a horizontal scroll bar and I'm not sure why. It's on WP and I did a lot of work on it. Last time I added social media registration in a pop up. Not 100% sure if that's the cause. How can I fix it? Thank you!
Premium Design Courses by Chris Barin
Chris Barin | Become a Designer
Learn Figma, Adobe XD, Photoshop, and become a great designer. Learn from Chris Barin, a certified Adobe Instructor
31 Replies
line 18 in style.css, you have:
that
overflow-x: scroll; is making the scrollbar show upthank you, awesome! I'll try it in a second
it worked! thanks so much!
There's still side scrolling on mobile. I would look into that.
on my browser in mobile mode and on my note 10+ it seems fine ...
any particular page or place where you see the scroll on mobile?
On my phone.
what model please? can you post a screenshot? I tried on another phone, s9, no issues
thanks for the help
The 2 comparison SS.
It's a Xiaomi, Redmi Note 9 If I remember correctly.
Well, I opened it on my PC, and there's a blank empty space to the right side.
hmm I see it in the ss, but not on my end
any ideas?
I would just dive into the code and see if anything is causing it, generally margin causes this kind of stuff, or fixed width on an element.
Weird case would be a parent having a % width below 100%.
I see. I don't have enough xp to debug it. thank you anyway
I will give it a try.
I found it. It was a bit annoying to find 😅
It's that
.row class, the margin is pushing all your content.oh wow...
There's a lot of unnecessary declarations within the childs that could cause some troubles.
why would anyone do that?
yeah
thank you!
Bad practices 😅
should I set it to 0 or just remove that line?
You can simply remove it.
They're using
margin instead of padding to move the content within. So that shifts the layout of everything else.right. that makes sense
I used several devs from freelancer.com
done
please have a look
Yeah, well there's multiple reasons this could be happening, but it's often due to bad practices, or inconsistency.
I think I should remove the left one too..
Yeah, I don't have side scrolling now.
not sure. maybe remove both and add padding instead?
on my end it's uneven
the right side has a bigger gap
You could replace both margin, by padding.
In fact, you could do:
Or
padding: 0 1rem; either works.done 1rem
let's see..
ouf
this is much worse
I'd like 10 pixels on either side
it's still not looking right with 10 on either side
seems like there's 25px padding
1rem equals 16px.
It's just better practice to use
em or rem.
Well, you can play around with it now 😄1px seems ok
All done then?
If you need more help just tag me.
all good. thank you ❤️