Медиа-запросы вообще не работают

Question

Так что мне было интересно, может ли кто-нибудь помочь мне с этим? Я делаю тестовый сайт, и я не работаю с медиа-запросами. Я пробовал несколько вещей и искал Google, но я не могу найти ответ, который решает мою проблему. Код:

<header> 
     <nav> 
      <div class="navbar"> 
       <div class="row"> 
        <img href="index.html" src="resources/images/logo.png" alt="talkFM logo" class="logo"> 
        <ul class="main-nav"> 
         <li><a href="#">Hjem</a></li> 
         <li><a href="omoss.html">Om oss</a></li> 
         <li><a href="kontaktoss.php">Kontakt oss</a></li> 
        </ul> 
       </div> 
      </div>  
     </nav> 

     <div class="hero-text-box"> 
      <p class="velkommen">Velkommen til Talk fm</p> 
      <h1>Kom i kontakt med vennene dine - on the air. </h1> 
      <!--<a class="btn btn-full" href="#">Pr&oslashv n&aring</a> 
      <a class="btn btn-ghost" href="#">Sp&oslashr oss</a>--> 
      <p class="info">Mobilt radionettverk i Bergen & omegn med god <br>radiodekning. N&aring kan du holde kontakten via din VHF radio.<br> Bli med og opplev gleden med radio du ogs&aring!</p> 
     </div> 
     <div class="hero-text-img"> 
      <img src="resources/images/radio_ki.png"> 
     </div> 
    </header> 

.hero-text-box h1 { 
    color: white; 
    font-size: 150%; 
    font-weight: 400; 
    letter-spacing: 1px; 
    word-spacing: 3px; 
    margin-bottom: 5px; 
} 


@media screen and (max width: 1200px) {  

    .hero-text-box h1 { 
     color: black; 
    } 


} 

Answer 1

В запросе на медиа это не похоже на то, что у вас есть «-» между миром и шириной. Медиа-запрос должен выглядеть следующим образом:

@media (min-width: 1200px) {  

    .hero-text-box h1 { 
     background-color: yellow; 
    } 
} 

«и» ключевым слова используется для объединения нескольких медиа отличительных черт вместе и комбинируя мультимедийные функции с типами носителей. Check here for more info