CSS media query min-width & max-width not working

Question

Codepen here: https://codepen.io/codepenuserpro/pen/ExQrEbo

HTML:

<div></div>

CSS:

div
{
  height:400px;
  width:400px;
  background-color:red;
}

@media only screen and (min-width: 1068px) and (max-width: 1380px)
{
  background-color:blue;
}

Why isn't the div changing background color even when I resize the browser window to between 1068 - 1380px?

Answer 1

Media Query Syntax

A media query consists of a media type and it can contain one or more expressions, which resolve to either true or false.

If it resolves to true, the css code inside of it is applied.

@media not|only mediatype and (expressions) {
  <stylesheet>
}

You must select the element- div in this case, inside the media query as of the following.

@media only screen and (min-width: 1068px) and (max-width: 1380px) {
  div {
    background-color:blue;
  }
}

 div { height: 400px; width: 400px; background-color: red; } @media only screen and (min-width: 1068px) and (max-width: 1380px) { div { background-color: blue; } }

 <div></div>

Answer 2

You didn't select the div in the second approach.

You may want to have this:

@media only screen and (min-width: 1068px) and (max-width: 1380px) {
    div {
        background-color: blue;
    }
}

Answer 3

You need to select the selector(div) inside media query. try this:

@media only screen and (min-width: 1068px) and (max-width: 1380px){
  div{
    background-color:blue;
  }
}