Почему не работают media запросы?

Question

[kustiktm]

Работает только первый запрос, который в коде выше всех. Вне зависимости от размера окна. Проект на django.

<meta name="viewport" content="width=device-width, initial-scale=1">

@media (max-width: 770px) {


    /* Header */
    .header {
        padding: 10px 0;
    }

    /* Nav */
    .nav {
        display: none;
        width: 100%;

        position: absolute;
        top: 100%;
        left: 0;

        background-color: #eb8b8d;
    }

    .nav.active {
        display: block;
    }

    .nav_link {
        display: block;
        margin: 0;
        padding: 8px 20px;
    }

    .nav-toggle {
        display: block;
    }


    /* Section */
    .section {
        padding: 40px 0;
    }

    .section--devices {
        padding-bottom: 0;
    }


    /* Card */
    .card {
        margin-top: 50px;
        justify-content: center;
    }

    .card__item {
        width: 100%;
        max-width: 410px;
        margin-bottom: 30px;
    }

    .card__item:last-child {
        margin-bottom: 0;
    }


}

@media (max-width: 670px) {

.intro_title {
    font-size: 95px;
    max-height: 110px;
}

.intro_subtitle {
    font-size: 40px;
}

.intro_telephone {
    font-size: 20px;
}

}

@media (max-width: 575px) {

    /* Intro */
    .intro_subtitle {
        font-size: 26px;
    }

    .intro_title {
        font-size: 60px;
        min-height: 66px;
        max-height: 42px;
    }

    .intro_telephone {
        font-size: 13px;
    }

    /* Section */
    .section__header {
        margin-bottom: 50px;
    }

    .section__suptitle {
        font-size: 20px;
    }

    .section__title {
        font-size: 24px;
    }

    .section__title:after {
        margin: 20px auto;
    }

    .card__item {
        max-width: 281px;
    }

    .copyright {
        font-size: 10px;
    }
}

@media (max-width: 330px) {

    .copyright {
        font-size: 7px;
    }
}

Comments

[kulaeff]

Не вижу медиа запросов.

[kustiktm]

kulaeff, прикрепил только что

[kulaeff]

Еще бы разметку. Но у меня все работает.

[kustiktm]

kulaeff, прикрепил

Answer 1

[DaBags]

Попробуйте составить запросы в обратном порядке:
media (max-width: 330px) {
...
}
media (max-width: 575px) {
...
}
media (max-width: 670px) {
...
}
media (max-width: 770px) {
...
}

И используйте min-wdth, вместо max-width: max-width: 330px, min-width: 331px, min-width: 576px, (min-width: 671px) and (max-width: 770px)