「！重要な」

Question

私は幅が設定されたOwl Carouselスライド内部クラスitem-contentとdiv要素を持っているmax-width: 320pxとmax-width: 768px

ためのいくつかのメディアクエリを設定しようとしているSCSSを使用しています600pxに変更しましたが、より小さいデバイスの幅を縮小したいと考えています。これは私が私の_app-responsive.scssで使用しているものです320の間と768

私はどこにあるの解像度のためのワイド解像度320PXと300pxため200pxを使用したいが、あなたが見ることができるように、私はitem-contentの幅に!importantセットを持っていますなぜなら、320pxの幅を持つiPhone 5の解像度が上がっていても、それは無効になっているからです。

@media (max-width: 320px) { 
    .home { 
    section#top { 
     .owl-theme { 
     .owl-dots { 
      top: -10%; 
     } 
     .owl-stage-outer { 
      .owl-stage { 
      .owl-item { 
       .item { 
       .item-content { 
        width: 200px !important; 
       } 
       } 
      } 
      } 
     } 
     } 
    } 
    } 
} 

@media (max-width: 768px) { 
    .home { 
    section#top { 
     .owl-theme { 
     .owl-stage-outer { 
      .owl-stage { 
      .owl-item { 
       .item { 

       h2 { 
        font-size: 16px; 
       } 

       .item-content { 
        width: 300px; 
       } 
       } 
      } 
      } 
     } 
     } 
    } 
    } 
} 

これは私が最後のメディアクエリを使用してファイルをインポートしています私の全体的なapp.scss

ですが、私は_app-custom.scss前にそれをインポートしようとしたが、それは何も変更しませんでした。ウィンドウが0PXと768pxの間にあるとき

@import 'app-variables'; 
@import '../../vendor/bootstrap-sass/stylesheets/bootstrap'; 
@import '../../vendor/bootstrap-sass/stylesheets/bootstrap-compass'; 
@import '../../vendor/font-awesome/scss/font-awesome'; 
@import 'app-custom'; 
@import 'app-responsive'; 

Answer 1

2つのメディアクエリーは、ウィンドウが0PXと320PXの間にあるときwidth: 200pxを作るだけでなく、width: 300pxでしょう。 300ピクセル：：

.item-content { 
    width: 200px; 
} 

@media (min-width: 321px) { 
    ... 
    .item-content { 
     width: 300px; 
    } 
} 

そして：

@media (max-width: 320px) { 
    ... 
    .item-content { 
     width: 200px; 
    } 
} 

@media (min-width: 321px) and (max-width: 768px) { 
    ... 
    .item-content { 
     width: 300px; 
    } 
} 

もあるため働くべきであるあなたは、メディアクエリを使用せずにwidth: 200pxを適用することができますし、ウィンドウサイズが320PX使用幅よりも大きい場合にのみ、この問題を解決するには

あなたの問題は、max-width: 768pxのクエリは、常にメディアクエリを上書きしていることです。max-width: 320px