@media画面が機能しない

Question

@media screen and (min-width: 501px) and (max-width: 769px) 

このメディアクエリのコードは、ウィンドウのサイズが1920pxの場合でも使用されます。このコードでは

ルック：フルスクリーンで

.row-contact{ 
    .col-xs-12:first-child { 
     margin-top: 0; 
    } 
} 

@media screen and (min-width: 501px) and (max-width: 769px){ 
    .row-contact { 
     padding: 0 !important; 

     .col-xs-12:first-child { 
      margin-top: 12%; 
     } 
    } 
} 

私はmargin-top: 12%を持っている、しかし、それはmargin-top: 0でなければなりません！

これはなぜ機能しないのですか？

編集 解決策を見つけました。 SCSS命令を書く前にメディアクエリを閉じました

ありがとうございます！ ：D

Answer 1

.row-contact{ 
 
    .col-xs-12:first-child { 
 
     margin-top: 0; 
 
    } 
 
} 
 

 
@media screen and (min-width: 501px) and (max-width: 769px){ 
 
    .row-contact { 
 
     padding: 0 !important; 
 
    } 
 
    .col-xs-12:first-child { 
 
      margin-top: 12%; 
 
    } 
 
}

あなたがLESSまたはSCSS

Answer 2

を使用していない場合は、ネスティングが動作していないので、この方法を試してみてください私はあなたのコードが

を動作しないように、あなたは、ネストされたCSSを使うと思います

@media screen and (min-width: 501px) and (max-width: 769px){ 
    .row-contact { 
     padding: 0 !important; 
    } 
    .col-xs-12:first-child { 
     margin-top: 12%; 
    } 
} 

上記のコードを使用してください ありがとう:)