css media query applying to full size page

Question

I'm using media queries on my page for smaller screens but it's applying when the page is in full size. when the page is in full size I have the h1 at 5rem but it shows in 2.5rem. Thank you in advance.

@media (min-width: 375px) {
  .container {
      padding: 0 2rem 0 2rem;
  }
  .container h1 {
      font-size: 2.5rem;
  }
}

Answer 1

specify screen to your css media query and also use max-width and not min-width

@media screen and (max-width: 375px) {
  .container {
      padding: 0 2rem 0 2rem;
  }
  .container h1 {
      font-size: 2.5rem;
  }
}