仅在移动视图中隐藏特定的div

Question

我在aspx页面中有HTML/CSS内容。

我想要一个特定的div部分（包括一些CSS类）来切换到移动视图时隐藏。

我已经尝试使用以下：

设置引导属性：

@media screen and (max-width: 600px){} 

和设置CSS /类属性：

{visibility: hidden;} 

但是当测试的代码，它躲到该div永久。

代码引导：

@media screen and (min-width: 768px) 



    .col-md-7 { 
     width: 58.33333333%; 
    } 

    .service { 
     background: #005366; 
     color: #999; 
     margin-bottom: 10px; 
    } 

    .service h4 a{ 
     color: #fff; 
    } 

    .service img { 
     float: right; 
     margin-left: 10px; 
     -webkit-transition: all 0.3s ease 0.1s; 
     -moz-transition: all 0.3s ease 0.1s; 
     -ms-transition: all 0.3s ease 0.1s; 
     -o-transition: all 0.3s ease 0.1s; 
     transition: all 0.3s ease 0.1s; 
    } 

    .service img:hover { 
     opacity: .9; 
    } 

    .service-in { 
     padding: 15px 0 0 10px; 
     min-height: 150px; 
    } 

预先感谢您。

Answer 1

您粘贴的代码不会显示您隐藏的确切CSS。告诉我们，看起来像下面的代码（或使用下面的代码）

@media screen and (max-width: 600px){ 
    .yourClassName { 
     visibility: hidden; 
    } 
} 

或替代，

@media screen and (max-width: 600px){ 
    .yourClassName { 
     display: none; 
    } 
} 

你的div是被永久隐藏意味着媒体查询可能没有被正确地应用。

帮助我们来帮助你。 欢迎。

Answer 2

您的mediaquery没有开始和结束。使用括号{}

@media screen and (max-width: 600px) { 

     .yourclass { 
      //your styles 
     } 
}