Why is my media query min-width not working?-CodePudding

I have a h1 with font size that I want to adjust based on the screen width.

const Title = styled.h1`
  font-size: 2.5rem;
  margin: 0;
  color: ${COLOR.blue};

  @media (min-width: 600px) {
    font-size: 2rem;
  }
`;

I tried it on my Pixel 4a and use USB debugging. Running window.screen.width shows 393 and window.screen.height shows 851. But my font size is 2 rem instead of 2.5 rem... I tried @media only screen and (min-width:600px) but its also the same What Im doing wrong? Thanks

CodePudding user response：

need to add font-size on h1 check below code

@media (min-width: 600px) {
   h1{
       font-size: 2rem;
   }
}

CodePudding user response：

If you want your css to implement on 600px device width or less, then you need to add

@media only screen and (max-width: 600px) { //your css }

When you define min-width in media query it means it will work in bigger screen than you have mentioned in media query and if you want css in smaller devices than you should add max-width in media query which will work in small devices