CSS在景观中失败

我想使用媒体查询调整列宽，但我无法调整，因此我需要专家建议，如果您愿意，我可以向您展示整个代码。问题发生在我的.cities类和.cities.col中，我无法更改宽度、字体大小和图标大小。 什么都没有

多谢各位

CSS代码：

 @media only screen and (max-width:767) and (orientation:landscape) {
        /* Styles for Landscape screen */
        header {
            height: 200vh;
        }
        header nav li a {
            font-size: 85%;
        }
        .cities .col {
            display: block;
            width: 100%;
        }
        .cities h3 {
            font-size: 10%;
        }
        .ios-small {
            font-size: 100%;
        }
        .cities .col img {
            width: 100%
        }
        .cities {
            padding: 0px;
        }
        .cities .col {
            margin-top: 5%;
            padding-bottom: 2%;
            width: 100%;
            transition: width 0.3s;
        }
        .cities .col:hover {
            background: rgba(234, 234, 234, 0.9);
            color: black;
        }
        .cities .col img {
            width: 100%;
            height: auto;
            margin: 0 0 0 0px;
        }
        .cities h3 {
            text-align: left;
            margin: -4px 0 0 0px;
            font-size: 100%;
        }
        .ios-small {
            font-size: 20%;
            font-weight: 200;
            margin-right: 5px;
            font-style: italic;
            color: #e67e22;
        }
    }

---

您需要为断点添加一个单位，因此

最大宽度：767px

这在任何地方都是活动的吗？还没有！使用xamp制作了一个本地服务器，然后我测试了它现在位于omnifood.net16.net