Icons getting skewed on Firefox

Design help General
1

Currently my website runs great on google chrome, but i downloaded the latest Firefox (46.0.1) and there’s a serious issue with the icons in the top right of the website. See image below: Firefox on the left, Chrome on the right.

1920×1080 1.57 MB

The icons themselves are contained in div blocks with a fixed size of 24x24, so I don’t see why they should be skewing on firefox.

497×708 104 KB

My site’s public share link: https://preview.webflow.com/preview/abps-mark-2?preview=10ae3332f29e48cefc6ea78323c4425b

2

Try to not use flexbox and see if this helps. Firefox is not the best compatible browser for flexbox. :wink:

3

Oh, nevermind, I’m dumb as hell.

That flexbox contained all three of the icons within it at a height of 24px. Chrome just wrapped the icons past the bounds of the flexbox, firefox actually did what the code said and contained the icons within it.

The problem’s solved.

4

Hehe… :sweat_smile:

5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.