I'm struggling to get my code to work properly. I've tried adjusting some parts to be more specific and others more general, but it's not functioning as expected.
Please review my code and any advice or assistance would be greatly appreciated. (it won't let me post the actual code, so I'll just use placeholder text) kkkkkkkkkkk kkkkkkkkkkk kkkkkkkkkkk
<!DOCTYPE html>
<html>
<head>
<title>Secret Agent Supply Inc.</title>
<link type="text/css" rel="stylesheet" href="./resources/reset.css">
<link type="text/css" rel="stylesheet" href="./resources/style.css">
</head>
<body>
<div class="company background-black">
<div class="nine-w container">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/secret-agent-supply/resources/images/logo.png">
<span>SECRET AGENT SUPPLY INC.</span>
</div>
</div>
<div class="banner">
<div class="nine-w">
<div class="banner-content background-black">
<h2>NEW ARRIVAL</h2>
<h1>SPORT BIKES AND MOTORCYCLES</h1>
</div>
</div>
</div>
<nav>
<div class="nine-w">
<ul class="desktop">
<li>Eyewear</li>
<li>Apparel</li>
<li>Gadgets</li>
<li>Vehicles</li>
<li>Classes</li>
<li>Contact</li>
</ul>
<ul class="mobile">
<li>Menu</li>
</ul>
</div>
</nav>
<div class="content">
<div class="images nine-w">
<div class="image-item">
<div class="image-div">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/secret-agent-supply/resources/images/pen.png">
</div>
<span class="background-black">Exploding Pen</span>
</div>
<div class="image-item">
<div class="image-div">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/secret-agent-supply/resources/images/watch.png">
</div>
<span class="background-black">Cellular Watch</span>
</div>
<div class="image-item hide">
<div class="image-div">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/secret-agent-supply/resources/images/glasses.png">
</div>
<span class="background-black">Thermal Glasses</span>
</div>
</div>
<div class="below nine-w">
<div class="below-images">
<span class="background-black">Location</span>
<p>-47.346436, 84.32354</p>
</div>
<div class="below-images">
<span class="background-black">Location</span>
<p>0800 - 1800</p>
</div>
</div>
</div>
<footer class="background-black">
<div class="nine-w">Copyright Secret Agent Supply Inc.</div>
</footer>
</body>
</html>
CSS
html{
font-size: 18px;
color: white;
font-family: Helvetica;
}
.nine-w{
max-width: 960px;
margin: 0 auto;
}
.background-black{
background-color: black;
}
.company .nine-w{
display: flex;
align-items: center;
padding: 0.66rem 0;
}
.company img{
height: 1.5rem;
padding: 0 1rem 0 0;
}
.company span{
font-size: 1rem;
}
.banner{
height: 25rem;
background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/moto.jpeg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.banner-content{
max-width: 20rem;
padding: 2rem 3rem;
position: relative;
top: 9rem;
}
h2{
font-size: 1rem;
font-weight: bold;
padding-bottom: 0.25rem;
}
h1{
font-weight: bold;
font-size: 2rem;
}
nav{
background-color: firebrick;
}
nav ul{
display: flex;
align-items: center;
justify-content: space-between;
background-color: firebrick;
padding: 0.75rem 0;
}
.images{
display: flex;
justify-content: space-between;
}
.image-item{
width: 30%;
display: flex;
flex-direction: column;
border: 4px solid black;
margin-top: 3rem;
}
.image-div{
height: 9rem;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 0;
}
.image-item img{
max-width: 8rem;
}
.image-item span{
display: block;
text-align: center;
padding: 0.5rem 0;
}
.below{
display: flex;
justify-content: space-between;
margin-top: 3rem;
}
.below-images{
width: 35%;
margin-bottom: 4rem;
}
.below-images span{
display: block;
padding: 1rem 0 1rem 2rem;
}
.below-images p{
color: black;
}
footer{
padding: 5rem 0;
}
.mobile{
display: none;
}
@media only screen and (max-width: 470px){
.banner-content h2{
font-size: 0.77rem;
}
.banner-content h1{
font-size: 1rem;
}
.banner-content{
padding: 1rem 2rem;
top: 10rem;
}
.banner{
height: 15rem;
}
}
@media only screen and (max-width: 1024px){
.hide{
display: none;
}
.image-item{
width: 47%;
}
.desktop{
display: none;
}
.mobile{
display: block;
text-align: center;
}
.banner-content h1{
font-size: 1.5rem;
}
}
My expectation was that the media query should take effect when my screen size is 470px or less, however, it does not seem to be working correctly.