Submitted over 1 year ago

Wierd Icon Behaviour

NBD•240

@bdal90

Preview site View code

This is a solution for...Ping single column coming soon page

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

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

Please log in to post a comment

Community feedback

P
Daniel 🛸•44,780
@danielmrz-dev
Posted over 1 year 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 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

Join 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