@media Query wird nicht erkannt

Question

Ich bin neu Bootstrap (v3.3.7) und versuchen, Änderungen an einer 320 x 480 Ansicht, die ich verstehe, würde die Col-xs- verwenden. Einstellung. Ich weiß, dass diese in BS3 hardcoded sind, aber für das Leben von mir, kann die kleinen Einstellungen nicht außer Kraft setzen. Ich versuche nur, die Schriftfarbe zu ändern. Sollte einfach sein oder?

Ich habe verschiedene Kombinationen von @ media Abfragen ausprobiert, aber nichts funktioniert. Alle anderen Auflösungen funktionieren gut. Ich habe meinen Code veröffentlicht und wäre dankbar, wenn mir jemand einen Zeiger geben könnte. Danke vielmals.

HTML CODE

<footer id="footer"> 
    <div class="thumbnail"> 
     <div id="sub-header"> 
     <div class="container"> 
      <div class="row"> 
      <div class="col-md-3 col-sm-6 col-xs-6"> 
       <p>col 1</p> 
      </div> 
      <div class="col-md-3 col-sm-6 col-xs-6"> 
       <p>col 2</p> 
      </div> 
      <div class="col-md-3 col-sm-6 col-xs-6"> 
       <p>col 3</p> 
      </div> 
      <div class="col-md-3 col-sm-6 col-xs-6"> 
       <p>col 4</p> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div class="copyright"> 
     <p>©2017 Somesite.net</p> 
     </div> 
    </div> 
    </footer> 

CSS CODE

.copyright p { 
    text-align: center; 
    color:yellow; 
} 

@media(min-width:767px) and (max-width:990px) { **<--- This one not working** 
    .copyright p { 
    color: grey; 
    } 
} 

@media(min-width:768px) and (max-width:991px) { 
    /* Styles */ 
    .pricingTable>.pricingTable-header:after { 
    border-left: 215px solid transparent; 
    } 
    .copyright p { 
    text-align: center; 
    color: blue; 
    } 
} 
@media(min-width:992px) and (max-width:1199px) { 
    .copyright p { 
    text-align: center; 
    color: green; 
    } 
} 
@media(min-width:1200px) { 
    .copyright p { 
    text-align: center; 
    color: yellow; 
    } 
} 

EDIT: Vielleicht ist dieser Code verursacht Problem.

/*** CODE FOR PRICING TAGS ***/ 

    .pricingTable { 
     text-align: left; 
     background-color: #ffe400 !important; 
     padding-top: 5px; 
     transition: all 0.5s ease-in-out 0s; 
     border: 3px solid white; 
     border-radius: 5px; 
    } 
    .pricingTable>.pricingTable-header { 
     color: #000 !important; 
     height: 75px; 
     position: relative; 
     transition: all 0.5s ease 0s; 
    } 
    .pricingTable>.pricingTable-header:after { 
     content: ""; 
     /*border-bottom: 40px solid #727cb6;*/ 
     /*border-left: 263px solid transparent;*/ 
     position: absolute; 
     right: 0px; 
     bottom: 0px; 
    } 
    .pricingTable:hover .pricingTable-header { 
     /*height: 230px;*/ 
     /*transition: all 0.5s ease 0s;*/ 
    } 
    .pricingTable-header>.heading { 
     display: block; 
     padding: 0; 
    } 
    h3 .heading { 
     margin-left: 25px; 
    } 
    .price-value { 
     margin-left: 25px; 
    } 
    .heading>h3 { 
     margin: 0; 
     text-transform: uppercase; 
     margin-left: 25px; 
    } 
    .pricingTable-header>.price-value { 
     display: block; 
     font-size: 60px; 
     line-height: 60px; 
    } 
    .pricingTable-header>.price-value>.mo { 
     font-size: 14px; 
     display: block; 
     line-height: 0px; 
     text-transform: uppercase; 
    } 
    .pricingTable-header>.price-value>.currency { 
     font-size: 24px; 
     margin-right: 4px; 
     position: relative; 
     bottom: 30px; 
    } 
    .pricingTable>.pricingContent { 
     text-transform: uppercase; 
     color: #000 
    } 
    .pricingTable>.pricingContent>ul { 
     list-style: none; 
     padding-left: 22px; 
    } 
    .pricingTable>.pricingContent>ul>li { 
     padding: 0; 
     border-bottom: 0; 
    } 
    .pricingTable>.pricingContent>ul>li:last-child { 
     border: 0px none; 
    } 
    .pricingTable-sign-up { 
     padding: 10px 0; 
    } 
    .pricingTable-sign-up>.btn-block { 
     width: 100%; 
     margin: 0 auto; 
     background: #000; 
     /*border: 2px solid #fff;*/ 
     color: #fff; 
     padding: 15px 12px; 
     text-transform: uppercase; 
     font-size: 14px; 
    } 

@media screen and (max-width: 1200px){ 
    .pricingTable > .pricingTable-header:after{ 
     border-left: 215px solid transparent; 
    } 
} 
@media screen and (max-width: 990px){ 
    .pricingTable{ 
     margin-bottom: 20px; 
    } 
    .pricingTable > .pricingTable-header:after{ 
     border-left: 349px solid transparent; 
    } 
} 
@media screen and (max-width: 480px){ 
    .pricingTable{ 
     overflow: hidden; 

Answer 1

Sie überschreiben Ihre "fehlerhafte" Medienabfrage. Dies funktioniert wie vorgesehen.

copyright p { 
 
     color: yellow; 
 
    } 
 
    
 
    @media (max-width:767px) { 
 
     .copyright p { 
 
      color: grey; 
 
     } 
 
    } 
 
    
 
    @media(min-width:768px) and (max-width:991px) { 
 
     /* Styles */ 
 
     .pricingTable>.pricingTable-header:after { 
 
      border-left: 215px solid transparent; 
 
     } 
 
     .copyright p { 
 
      text-align: center; 
 
      color: blue; 
 
     } 
 
    } 
 
    
 
    @media(min-width:992px) and (max-width:1199px) { 
 
     .copyright p { 
 
      text-align: center; 
 
      color: green; 
 
     } 
 
    } 
 
    
 
    @media(min-width:1200px) { 
 
     .copyright p { 
 
      text-align: center; 
 
      color: yellow; 
 
     } 
 
    }

<body> 
 
    <div class="copyright"> 
 
     <p>©2017 Somesite.net</p> 
 
    </div> 
 
</body>

---

erklären Weitere auf Medien-Anfragen:

Wenn Sie einige Styling wollen oben Xpx Breite passieren:

@media (min-width: Xpx){}

Wenn Sie einige Styling unter Xpx Breite verwenden:

@media (max-width: Xpx){}

Wenn Sie einige Styling zwischen Xpx und Ypx Breite verwenden möchten:

@media (min-width: Xpx) and (max-width: Ypx){}