Блог

У меня есть страница, состоящая из нескольких 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 в инспекторе.

Может быть, вы забыли добавить мету Viewport? Поскольку я пытался воспроизвести поведение и не имел проблем с вашим кодом.

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