@media работает только на одну страницу
пишу адаптацию для мобильной версии сайта. У меня на сайте находятся карточки которые выстроены по три в ряд, для мобильной версии хочу чтобы они стояли одна в ряду. Так работает только для одной из страниц, на трех других они выстраиваются по две в ряд и заметно уменьшают размер текста. Пробовал копировать код с первой страницы на другие, хотя код там и так одинаковый, все равно выстраиваются по две в ряд. Самый нижний код- работает, тот что над ним, нет.
На всякий пожарный напишу еще раз. Есть 4 страницы, на каждой странице по пять карточек с животными (в примерах ниже одна такая карточка), при уменьшении экрана до мобильной версии (425px) все карточки должны выстраиваться в один ряд. Нижняя часть кода так и делает, а верхний выстраивает карточки по две в ряд, что мне не подходит.
Сейчас посмотрел код через браузер, @media screen and (max-width:425px) работает только на первой странице, на трех других он не применяется.
@media screen and (max-width: 1024px), (min-width:426px) {
.news-row {
overflow-x: hidden;
grid-auto-flow:row;
grid-template-columns: repeat(2, 1fr);
}
.news-item {
min-width: auto;
}
}
@media screen and (max-width:425px) {
.header__logo {
font-size: 35px;
}
.description {
font-size: 16px;
}
.news-row {
overflow-x: hidden;
grid-auto-flow:row;
grid-template-columns: 1fr;
}
.nav_link {
font-size: 15px;
padding: 17px 3px;
}
.news-item {
margin: auto;
}
}
.news-item{
border-color: #f6f6f6;
border-radius: 20px;
min-height: 150px;
width: 357px;
padding: 50px 3px 50px 30px;
min-width: auto;
margin: 0 0 0 70px;
}
<section class="turtle">
<div class="container5">
<div class="news-row">
<article class="news-item">
<div class="news_thumb">
<img src="../ReptHelp/assets/images/asian-turtle.jpg" alt="миниатюра">
</div>
<h3 class="news-title">
<a class="post" href="poloz.html">Среднеазиатская черепаха</a>
</h3>
<div class="news-description">
</div>
</article>
</div>
</div>
</section>
<section class="lizard">
<div class="container3">
<div class="news-row">
<!-- //* первый *// -->
<article class="news-item">
<div class="news_thumb">
<img src="../ReptHelp/assets/images/lizard/eu.jpg" alt="миниатюра">
</div>
<h3 class="news-title">
<a class="post" href="eublefar.html">Эублефар</a>
</h3>
<div class="news-description">
Маленький питомец, который не оставит вас равнодушным
</div>
</article>
</div>
</div>
</section>