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?

CodePudding user response：

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>

CodePudding user response：

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;
  }
}

CodePudding user response：

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;
    }
}