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