Media queries ignored from a certain resolution

Question

Working with Mediaqueries for responsive layout, I came across the following problem: I’m setting the resolutions quietly, but when I get to 800px the configuration gives 320px and 360px. It is completely ignored by the browser. What to do?

With 800px:

Without 800px:

/* Smartphone em modo retrato */
@media only screen and (max-width : 320px) {
    .logo{
        background-size: 81px 49px !important;
        background-image:url(../images/logo.png);
        background-position: 125px 1px;
        width: 100%;
        height: 100%;
    }
}

@media only screen and (max-width : 360px) {
    .logo{
        background-size: 81px 49px;
        background-image:url(../images/logo.png);
        background-position: 145px 1px;
        width: 100%;
        height: 100%;
    }
}


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
    .logo{
        background-size: 81px 49px;
        background-image:url(../images/logo.png);
        background-position: 345px 1px;
        width: 100%;
        height: 100%;
    }
}


@media only screen and (max-width : 800px) {
    .logo{
        background-size: 81px 49px;
        background-image:url(../images/logo.png);
        background-position: 365px 1px;
        width: 100%;
        height: 100%;
    }
}

Answer 1

Your problem is in order of its rules. In general, if two CSS rules "conflict" (i.e. both apply to the same element, with the same specificity, and each has a different value for a property) than was defined after overriding the one defined before.

So if a rule says largura < 360 and another says largura < 800, a wide screen - say - 300 will activate both rules. If they conflict, the one that was set after will take precedence.

Example 1 (see full screen, resize the browser window):

@media only screen and (max-width : 400px) {
    html, body {
        background-color: red;
    }
}

@media only screen and (max-width : 600px) {
    html, body {
        background-color: yellow;
    }
}

@media only screen and (max-width : 800px) {
    html, body {
        background-color: green;
    }
}

Example 2:

@media only screen and (max-width : 800px) {
    html, body {
        background-color: green;
    }
}

@media only screen and (max-width : 600px) {
    html, body {
        background-color: yellow;
    }
}

@media only screen and (max-width : 400px) {
    html, body {
        background-color: red;
    }
}

As you can see, in the first example once the screen gets smaller than 800 the background turns green and ready. In the second, it goes from green to yellow to red - since the rules more specific appear after the most general.