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
Jochem
Jochem2y ago
line 18 in style.css, you have:
html {
overflow-x: scroll;
scroll-behavior: smooth;
}
html {
overflow-x: scroll;
scroll-behavior: smooth;
}
that overflow-x: scroll; is making the scrollbar show up
ChrisBarin
ChrisBarin2y ago
thank you, awesome! I'll try it in a second it worked! thanks so much!
Myndi
Myndi2y ago
There's still side scrolling on mobile. I would look into that.
ChrisBarin
ChrisBarin2y ago
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?
Myndi
Myndi2y ago
On my phone.
ChrisBarin
ChrisBarin2y ago
what model please? can you post a screenshot? I tried on another phone, s9, no issues thanks for the help
Myndi
Myndi2y ago
Myndi
Myndi2y ago
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.
ChrisBarin
ChrisBarin2y ago
hmm I see it in the ss, but not on my end any ideas?
Myndi
Myndi2y ago
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%.
ChrisBarin
ChrisBarin2y ago
I see. I don't have enough xp to debug it. thank you anyway
Myndi
Myndi2y ago
I will give it a try. I found it. It was a bit annoying to find 😅
Myndi
Myndi2y ago
It's that .row class, the margin is pushing all your content.
ChrisBarin
ChrisBarin2y ago
oh wow...
Myndi
Myndi2y ago
There's a lot of unnecessary declarations within the childs that could cause some troubles.
ChrisBarin
ChrisBarin2y ago
why would anyone do that? yeah thank you!
Myndi
Myndi2y ago
Bad practices 😅
ChrisBarin
ChrisBarin2y ago
should I set it to 0 or just remove that line?
Myndi
Myndi2y ago
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.
ChrisBarin
ChrisBarin2y ago
right. that makes sense I used several devs from freelancer.com done please have a look
Myndi
Myndi2y ago
Yeah, well there's multiple reasons this could be happening, but it's often due to bad practices, or inconsistency.
ChrisBarin
ChrisBarin2y ago
I think I should remove the left one too..
Myndi
Myndi2y ago
Yeah, I don't have side scrolling now.
ChrisBarin
ChrisBarin2y ago
not sure. maybe remove both and add padding instead? on my end it's uneven the right side has a bigger gap
Myndi
Myndi2y ago
You could replace both margin, by padding. In fact, you could do:
.row {
padding-inline: 1rem;
}
.row {
padding-inline: 1rem;
}
Or padding: 0 1rem; either works.
ChrisBarin
ChrisBarin2y ago
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
Myndi
Myndi2y ago
1rem equals 16px. It's just better practice to use em or rem. Well, you can play around with it now 😄
ChrisBarin
ChrisBarin2y ago
1px seems ok
Myndi
Myndi2y ago
All done then? If you need more help just tag me.
ChrisBarin
ChrisBarin2y ago
all good. thank you ❤️
Want results from more Discord servers?
Add your server