Html CSS网格，某些媒体查询不适用

我有一个由许多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>

以下媒体查询正在成功应用，将外部div转换为单列网格：

@media only screen and (max-width: 980px) {
    div.grid-two {
        grid-template-columns: 1fr;
    }
}

以下内容不适用。我在inspector中看不到它，但当我查看源代码时，媒体查询会显示出来，因此这不是缓存问题

@media only screen and (max-width: 700px) {
    div.grid-two div.info {
        grid-template-columns: 1fr;
    }
}

我尝试了很多方法——我尝试在媒体查询中使用

minwidth

将标准样式封装起来，然后并排使用，使其具有“下”和“上”样式。它仍然从min width查询中提取样式，即使将浏览器调整为iPhone大小。我很恼火，这在一个网格上运行得很好，但在内部网格上却一点也不好

下面的两张图片-第一张是它当前的外观，规则根本没有应用或显示在inspector中。第二张图片-这是我希望它在700px以下的样子，这是通过在inspector中取消勾选

网格模板列

实现的

---

也许您忘记添加视口元了？因为我试图复制这种行为，并且对您的代码没有任何问题

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

可能是我，但看起来一切都正常…@kukkuz我添加了一些图片，以尝试更清晰一点-它似乎对您仍然正常工作吗？在我的手机和笔记本电脑上，它仍然同时显示图像和文本，缓存已被清除添加到您的标题中？哇，通常是我确定的第一行代码中的一行，在这种情况下忽略了它，这些是导致xD解决的问题，谢谢！请随便回答，我会接受的。酷，很高兴知道问题已经解决：）

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