@danielmrz-dev
Posted
Hello Dalma!
Nice project!
I think I've figured it out what happened.
I noticed that on your code you set the class .fa brands like this:
.fa-brands {
color: var(--blue);
border: 1px solid var(--pale-blue);
border-radius: 50%;
width: 2rem;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 1rem;
}
Did you use bootstrap or other framework? I still don't undestand much about frameworks other than a little bit of Tailwind, but when I checked your code using chrome dev tools, this same class had the property display: inline-block by default.
So there's a conflict there. You set display: flex; but the class has display: inline-block by dafault, so your setting does not work.
When I removed display: inline-block from it, the icons were centered.
I really hope it helps you. I'm talking about things I don't completely understand here, but I really hope it's useful for you.
By the way, great job!
Marked as helpful
@bdal90
Posted
Hi Daniel,
Thank you so much for checking it out for me. Indeed, you're right, the inline-block display overrides my flex display, but I still don't know how I could fix it. Even if I remove the display: inline-block in dev tools, I don't know how to remove it in my code editor. :/ I don't use any special framework, it's just pure CSS, I'll keep on trying and I hope I'll come up with something. :)
Best,
Dalma
@danielmrz-dev
Posted
@bdal90
I'm glad I could help! 😊
And please let me know when you learn how to fix that!
@bdal90
Posted
Hi Daniel,
I managed to fix this bug, but I have absolutely no idea why it is working this way and the other way doesn't. I simply changed the div to a ul and wrapped each icon in an li and that's it. Here is what it looks like now:
HTML:
<ul class="social-media">
<li><i class="fa-brands fa-facebook-f"></i></li>
<li><i class="fa-brands fa-twitter"></i></li>
<li><i class="fa-brands fa-instagram"></i></li>
</ul>
CSS:
.social-media {
display: flex;
justify-content: space-between;
min-width: 8.125rem;
}
li {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--blue);
border: 1px solid var(--pale-blue);
border-radius: 50%;
width: 2rem;
height: 2rem;
font-size: smaller;
}
li:hover {
background-color: var(--blue);
color: white;
cursor: pointer;
transition: 0.7s;
}
Hope this can come in handy for you too, :)
Cheers,
Dalma
