https://codepen.io/rstorms/pen/bjzwGv?editors=1010
Hey guys, having a bit of trouble here. The linkedin and GitHub navpills should be centered and responsive. I’m avoiding bootstrap if possible and trying to make them act accordingly when I shrink the page (they keep breaking up at the icons and words). I somehow can’t make them completely centered either. Any help would be appreciated, thanks!
You can either set a fix width for the links or use flexbox for your layout. I would choose the latter personally.
Also, you could use a media query, but that’s a little too much for this thing I guess.
try setting your display to inline for the <i> and <a> elements that are supposed to stay together (both must have that setting). and you can then wrap them both up in a span if you need the span to have different display characteristics as a whole.
This will solve the breaking up apart problem.
I don’t know flex box yet and what do you mean set a fix width?
EDIT: Nvm, I just did text-align: center; on the botnav class. Still trying to figure out the breaking up problem.
That’s almost correct, you just have to make the anchor tags as display:inline-block and use
text-align:center to the .botnav and also now remove the width you have set on .botnav
Quite honestly, all display: inline-block; on the anchor tags does is add padding to the botnav div? I’m confused on that. It doesn’t center it any moreso.
Without adding it in at all, it is still centered without the padding.
You have to apply text-align: center to your .botnav class
I didn’t use padding, it was already set there, since it was inline elements those paddings were not seen
I updated my code from what I had in my IDE from last night. Check it now.
Yep, that’s good to go, you have added what i had said before.
