Why is my media query not working as intended?

October 31, 2022

I’m trying to get some rudimentary media querying to work, but for some reason the div using the class "container" isn’t working on the media query using max width:1200px and min width: 992, it just dissapears from page when I enter that size. I have a very simple example set up and I don’t understand why the div just dissapears when I enter that size? It works for the three other sizes just fine.

Am I missing something simple?

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

>Solution :

Try this,

@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: 1200px) 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;
     }
}