私は私のウェブサイトを作るためのブートストラップを使用してい

Question

小型デバイスでセクションの高さを変更し、私は私のcssファイルにこのコードを追加したので、私は小さなデバイスに私の部分の高さを変更する方法：

@media(max-width: 768px){ 
.services{ 
    height:2000px; 
} 
} 
.services{ 
    height:1000px; 
    background-blend-mode: darken; 
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/bg-2.jpg'); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

しかし、それは動作しませんし、もう一度小さなデバイスで1000pxの通常の高さを示しています！だからこれをどうやって？

Answer 1

これは、2番目の宣言（1000px）が最初の宣言（2000px）を上書きするためです。 Chromeデベロッパーツールから添付のスクリーンショットをご覧ください。

ソリューション：ちょうど宣言の順序を切り替える（以下スニペットを参照）。後

.services{ 
 
    height:1000px; 
 
    background-blend-mode: darken; 
 
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/bg-2.jpg'); 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
@media screen and (max-width: 768px){ 
 
.services{ 
 
    height:2000px; 
 
} 
 
}

<div class="services"> 
 
Foo 
 
</div>

は