Media queries appearing differently in production vs development

I created a website in React, I am working on the @media queries. When I check the website in development it appears as desired. When deployed, I inspect it in Google Chrome, I see that the website is zoomed in.

In Google chrome, should the zoom level be set to "Fit to Window" or 100% ? I have the ability to zoom out using the touch-pad/mouse and it's still 100%, how to go about that ? I see there is a blank (white) area on the right of the screen, what's the reason behind that ?

Here is an Image:

Screenshot

Code Sample: HTML:

<header className="my-header" id="my-header-hero">

         
</header>

SASS:

@media only screen and (max-width: 1024px){
   .my-header{

      width: 64rem;
      height: 48rem;
      background-image: url("../someurl/someimage.jpg");
      background-size: cover;
      background-repeat: no-repeat;
      position: relative;
      left: -0.5rem;
      top: -12rem;

    }
 }

Thank you in advance.



Read more here: https://stackoverflow.com/questions/68459250/media-queries-appearing-differently-in-production-vs-development

Content Attribution

This content was originally published by abc 123 at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: