Next.js + Tailwind Website Zoomed In in firefox

Question

I have developed website using Next.js and Tailwind CSS. The website while testing appears to be zoomed In in Firefox but its looking fine in all other browsers.

When the screen is broguht to 80%, then the website looks fine in firefox. What's the solution to this problem so that the website should appear same in all browser.

Thanks

Answer 1

try to use css reset in the globalStyle.css file. just copy the reset from the following Link . that should resolve your problem

Answer 2

CSS Zoom property was used on the product site to set the layout. Avoid using this property as far as you can because firefox does not supports this property.

Answer 3

For anyone still looking for the solution, add the below in your head block. It did the trick for me.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"></meta>