Design comparison
Solution retrospective
Hey All,
I was almost very satisfied with myself when an unforseen issue came up and I would be truely grateful if somebody could explain to me what happened. Here is the issue:
My icons are perfectly centered while coding in VS Code and using Live Server, but as soon as I refresh the page, they shift to not being centered. Each time I make some changes, they go back to the center, - making me believe that I nailed the issue - but again shift back. I can't figure out what the problem could be, as at first it always shows the way I want it to be, but the final result is also messed up.... :/
Thanks for any remarks in advance,
Cheers,
Dalma
Community feedback
- @danielmrz-devPosted 12 months ago
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 hasdisplay: 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 helpful0@bdal90Posted 12 months agoHi 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
1@danielmrz-devPosted 12 months ago@bdal90
I'm glad I could help! 😊
And please let me know when you learn how to fix that!
0@bdal90Posted 12 months agoHi 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
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord