Why is my media query not working as intended?-CodePudding

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

CodePudding user response：

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

CodePudding user response：

Just 2 simple mistakes, first of all, you forgot the units at the 3 media-query. Second, i would recommend increasing the min-width everywhere by 1 pixel so that if you have that exact screen size, just 1 media-query is applied and not 2.

Here‘s an example:

@media screen and (max-width: 768px) {
    .container {
        width:100%;
        border:solid 1px black;
        height:300px;
    }
}

@media screen and (max-width: 992px) and (min-width: 769px) {
    .container {
        width:100%;
        border:solid 1px red;
        height:300px;
    }
}

@media screen and (max-width: 1200px) and (min-width: 993px) {
    .container {
        margin:auto;
        width: 800px;
        border:solid 1px green;
        height:300px;
     }
}

@media screen and (min-width: 1201px) {
    .container {
        margin:auto;
        width: 1000px;
        border:solid 1px blue;
        height:300px;
     }
}