CSS在横向上失败

Question

我想调整列宽使用媒体查询，但我不能够，所以我需要专家的意见，我可以告诉你如果你想要的整个代码。这个问题发生在我的.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; 
     } 
    } 

This is the Preview of Website in Iphone6 Landscape

Answer 1

您需要添加一个单位断点如此max-width:767px。