Why are media queries now working in this code example?

Question

whý is this media query not working?i want the div to become 300x300 and red when the viewport is more than 800px: expand it to full screen to watch the problem.

.test{
  width:600px;
  height:600px;
  background-color:grey;
}

@media (width: 800px){
  .test{
    width:300px;
    height:300px;
    background-color: red;
  }
}

<div class="test"></div>

Answer 1

in the media query, you added an error by specifying @media (width: 800px) {}. You need to fix this - @media (max-width: 800px){}.

P.S. if you specify @media (min-width: 800px){} in the media query, then your red square will be displayed on large screens, and the gray square will appear at 800 pixels.

.test{
  width:600px;
  height:600px;
  background-color:grey;
}

@media (max-width: 800px){
  .test{
    width:300px;
    height:300px;
    background-color: red;
  }
}

<div class="test"></div>