Why not work with media queries?

Works only the first request in the code above all. Regardless of the window size. A project in 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;
}
}
April 7th 20 at 11:01
1 answer
April 7th 20 at 11:03
Solution
Try to make the queries in reverse order:
@media (max-width: 330px) {
...
}
@media (max-width: 575px) {
...
}
@media (max-width: 670px) {
...
}
@media (max-width: 770px) {
...
}

And use min-wdth, instead of max-width: max-width: 330px min-width: 331px min-width: 576px, (min-width: 671px) and (max-width: 770px)

Find more questions by tags CSSHTML