I've been experimenting with some basic media queries but am encountering an issue with the div element that has the class "container." Whenever I adjust the screen size to be between 992px and 1200px, the div disappears from the page. It's perplexing because it works perfectly at all other sizes. What could I be overlooking here?
Am I missing a simple solution?
@media screen and (max-width: 768px) {
.container {
width:100%;
border:solid 1px black;
height:300px;
}
}
@media screen and (max-width: 992px) and (min-width: 768px) {
.container {
width:100%;
border:solid 1px red;
height:300px;
}
}
@media screen and (max-width: 1200) and (min-width: 992px) {
.container {
margin:auto;
width: 800px;
border:solid 1px green;
height:300px;
}
}
@media screen and (min-width: 1200px) {
.container {
margin:auto;
width: 1000px;
border:solid 1px blue;
height:300px;
}
}