Personal Portfolio Webpage HTML and CSS Padding Issues

Code Feedback
1

Hey community
I’m wrapping up my webpage portfolio and would like to ask for help to get it checked. https://codepen.io/JulyNight/pen/oExPbv

  1. As you noticed on the right side there’s a white space padding issue. Please help me to get rid of this with a worm advice or addition to my code.
  2. I’d like to make my icons more interactive and user friendly with the hover and fontawesome attributes. Such as when somebody puts a cursor on the icon it starts hovering an fa icon over it with some opacity effects I’d think.
  3. If there’re any suggestions of how to make it better please let me know.
    Thx a lot in advance!
1 Like
2

First of all, that is one sharp looking portfolio! Well done :+1:

So I rooted around a little bit in your code and it looks like that extra space on the side is coming from:

.row {
    margin-right: -15px;
    margin-left: -15px;
}

Specifically in your section of language icons.

I’m not sure how to fix that via Bootstrap as I’ve not used it myself. But if you want a quick fix, if you add overflow: hidden; to your .aboutCSS style that should negate the extra margin.
That’s my usual go to when I have margins that exceed their container.

1 Like
3

OMG thank you!
Awesome solution btw, I was so bugged because of it… and now it’s like hell-yeah moment

1 Like
4

No problem! Again, there totally might be something in Bootstrap that could fix it, you’d have to ask around though. It could very well come down to a single missing class with that framework.

Just a heads up for future projects, typically (at least in my experience) if I see a horizontal scroll bar it’s either a side margin on an element OR it’s a width styling pushing it beyond the boundary of the body. Those are the first two things to check up on.

1 Like