Multiple media queries, only apply first-CodePudding

Hi I don´t know why this is not working. It´s only apply the 1366px media querie. I add the background color to be more notorious.

.itemListContainer {
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 63%;
    margin: 0 auto;
}
/* APPLYING MEDIA QUERIES */
@media (max-width: 768px) {
    .itemListContainer {
        grid-template-columns: 1fr;
        background-color: green;
        width: 100%;
    }
}
@media (max-width: 1024px) {
    .itemListContainer {
        grid-template-columns: 1fr 1fr;
        background-color: blue;
        width: 90%;
    }
}
@media (max-width: 1366px) {
    .itemListContainer {
        grid-template-columns: 1fr 1fr 1fr;
        background-color: red;
        width: 80%;
    }
}

CodePudding user response：

When the screen is less than 769px wide, then all the media queries will apply.

Is the screen less than or equal to 768px? @media (max-width: 768px) Yes, so make the background color green.

Is the screen less than or equal to 1024px? @media (max-width: 1024px) Yes, so make the background color blue.

Is the screen less than or equal to 1366px? @media (max-width: 1366px) Yes, so make the background color red.

Because the 1366px media query is last, the background color that is assigned there will override the previous rule(s).

If you only want the first media query to apply when the screen is less than or equal to 768px, use min-width.

@media (max-width: 768px) {
    .itemListContainer {
        grid-template-columns: 1fr;
        background-color: green;
        width: 100%;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .itemListContainer {
        grid-template-columns: 1fr 1fr;
        background-color: blue;
        width: 90%;
    }
}
@media (min-width: 1025px) {
    .itemListContainer {
        grid-template-columns: 1fr 1fr 1fr;
        background-color: red;
        width: 80%;
    }
}

CodePudding user response：

It is just because of the order you have written it in. For example, whenever the first condition is true the third will obviously be true. And hence the styles in the third one will modify the first one.

Same can be said for the second and first one.

You can write it in a different order.

.itemListContainer {
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 63%;
    margin: 0 auto;
}
/* APPLYING MEDIA QUERIES */
@media (max-width: 1366px) {
    .itemListContainer {
        grid-template-columns: 1fr 1fr 1fr;
        background-color: red;
        width: 80%;
    }
}
@media (max-width: 1024px) {
    .itemListContainer {
        grid-template-columns: 1fr 1fr;
        background-color: blue;
        width: 90%;
    }
}
@media (max-width: 768px) {
    .itemListContainer {
        grid-template-columns: 1fr;
        background-color: green;
        width: 100%;
    }
}