html – Multiple media queries, only apply first


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



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here