So I was wondering if anyone could help me with this? I'm doing a test site and I'm not getting media queries working. I have tried multiple things and googled but I cannot find an answer that solves my problem. The code is:
<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øv nå</a>
<a class="btn btn-ghost" href="#">Spør oss</a>-->
<p class="info">Mobilt radionettverk i Bergen & omegn med god <br>radiodekning. Nå kan du holde kontakten via din VHF radio.<br> Bli med og opplev gleden med radio du også!</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;
}
}
In your media query it doesn't look like you have '-' between the min and width. Media query should look something like this:
@media (min-width: 1200px) {
.hero-text-box h1 {
background-color: yellow;
}
}
The 'and' keyword is used for combining multiple media features together and combining media features with media types. Check here for more info