У меня есть страница, состоящая из нескольких CSS-сеток. Сетка, с которой у меня проблемы, это:
<div class="grid-two">
<div class="list">
<h1>Featured Opportunities</h1>
<ul>
...
</ul>
</div>
<div class="info">
<div class="hand-logo">
...
</div>
<div class="info-right">
...
</div>
</div>
</div>
Следующий CSS применяется к внешнему div - grid-two, а затем ко второму внутреннему div info:
div.grid-two {
display: grid;
grid-template-columns: 1fr 2fr;
}
div.grid-two div.info {
display: grid;
text-align: center;
grid-template-columns: 1fr 1fr;
align-items: center;
}
Следующий медиа-запрос успешно применяется, превратив внешний div в одну столбцовую сетку:
@media only screen and (max-width: 980px) {
div.grid-two {
grid-template-columns: 1fr;
}
}
Следующее НЕ применяется. Я не вижу его в инспекторе, но когда я просматриваю источник, медиа-запрос показывает, что это не проблема кэширования.
@media only screen and (max-width: 700px) {
div.grid-two div.info {
grid-template-columns: 1fr;
}
}
Я пробовал несколько вещей - я пытался втиснуть стандартные стили для этого в медиа-запрос, используя min-width, а затем использовать это рядом, чтобы у него были стили «под и над». Он по-прежнему выбирает стили из запроса минимальной ширины, даже когда размер браузера изменяется до размера iPhone. Меня раздражает, что это хорошо работает на одной сетке, но не на внутренней.
Ссылка для наглядности
Два изображения ниже - первое, как оно выглядит в настоящее время, правило не применяется вообще или отображается в инспекторе. Второе изображение - это то, как я хотел бы, чтобы оно выглядело ниже 700 пикселей, это было достигнуто путем снятия отметки grid-template-columns внутри инспектора.
