Is this a Firefox bug or am I missing something?

[Ricky55]

Hi guys

Could you take a look at this for me please.

https://codepen.io/qwerty-design/pen/QQXKaR

In Firefox when the screen width gets narrow instead of floating two items it breaks to just one. Seems ok in chrome.

My code on the breakpoint is

width: calc((100% - 2.5rem) / 2);

If I change 2.5rem to 2.509rem then it works but 2.5rem should work as thats my margin width.

Is this a bug or am I missing something? its annoying as I want to use a variable in place of 2.5rem.

Cheers

Btw I’m on Windows 10.

[Scipik]

Changing the font-size to 57 or 59 from the below query in the code also seemed to fix it for me. I couldn’t tell you why without digging in further, but this could be a solution for your current problem.

@media only screen and (max-width: 37.5em){
html{font-size:58%}
}

[Ricky55]

Thanks man, seems like it is some strange anomaly.

[Author]

Posts