CODEWITHSUNDEEP
csswidthimage-resizingstyled-components
Rafael
Rafael

Reputation: 53

Firefox width issue

I recently made my Web Developer portfolio: http://rafaelmuttoni.com/ and everything seemed fine.

Until a random guy opened a issue in my repo about a sizing problem happening in Firefox.

I just cannot figure out why this happens ONLY in Firefox.

When I hover the navbar the list items just go huge.

You can inspect or go to this link, which is the styled file of the navbar: https://github.com/rafaelmuttoni/rafaelmuttoni.com/blob/master/src/components/Navbar/styled.js

You can check the issue in this image

Thanks.

Upvotes: 1

Views: 40

Answers (1)

focus.style
focus.style

Reputation: 6760

The problem begins because of the svg tag. They don't have their own fixed size and depends on the size of parent element. Somehow in Firefox they are reacting on parent width scaling.

I just try to set fix widht in css of the svg icons and it helped.

.dQgIel {
width: 32px;
}

Just add it to your existing css

.dQgIel {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    width: 32px; /*the cure*/
}

Upvotes: 1

Related Questions