Q:

Only first two media queries works in CSS. Rest is being ignored

I'm sure there is a really simple solution to my problem.
I have tree media queries, but only the first two works. The 800px one is simply being ignored when viewed on phone.

div {
  color: yellow;
  font-size: 50px;
}

@media (max-width: 1200px) {
  div {
    color: red;
  }
}

@media (max-width: 1000px) {
  div {
    color: green;
  }
}

@media (max-width: 800px) {
  div {
    color: purple;
  }
}
<div>Hello</div>

A:

Add the  meta tag to your html with initial-scale set to 1.
<meta name="viewport" content="width=device-width, initial-scale=1">

