CODEWITHSUNDEEP
cssmedia-queries
Xeon
Xeon

Reputation: 395

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

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?

Upvotes: 0

Views: 1373

Answers (3)

Sammeeey
Sammeeey

Reputation: 85

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

Upvotes: 0

mahan
mahan

Reputation: 15015

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>

Upvotes: 1

Reshan Gayantha
Reshan Gayantha

Reputation: 1

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

Upvotes: 0

Related Questions