僅在移動視圖中隱藏特定的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 
     } 
}