After completing this certification I made the mistake of going back and messing around with my product landing page. When I resubmitted it’s telling me I don’t have a media query. My media query is working just fine when I resize the window. I’ve tried 5 or 6 different functioning media queries and it still gives me the same error. All my other styles are also working and the stylesheet is linked.
This is the most recent media query which shrinks my price boxes and reduces their font size when I shrink the window. Any ideas?
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=display-width, initial-scale=0">
<title>Product Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<div class="header">
<div class="logo-tm">
<div class="logo">
<img src="https://media.istockphoto.com/id/1311587834/vector/blood-pressure-isolated-icon-illustration.jpg?s=612x612&w=0&k=20&c=6EHyfz5GYb8NMg8nyg7zccZF50zzDbfFwVs5_uo4mvQ=" alt="BP Cuff Logo" id="header-img">
</div>
<div class="tm">
<h1>Under Pressure ™</h1>
<h4>Premium Blood Pressure Cuffs</h4>
</div>
</div>
<div class="navbar">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#about">About</a></li>
<li><a class="nav-link" href="#how-to-use">How to Use</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<h1 class="title">Best Blood Pressure Cuffs Around!</h1>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<div class="form">
<div class="email-label">
<label for="email">Enter your Email Address Below: </label>
</div>
<div class="email-input">
<input id="email" type="email" name="email" placeholder="Enter Your Email Address Here">
</div>
<div class="submit">
<input id="submit" type="submit" value="Submit" method="post">
</div>
</div>
</form>
<div class="bottom-half">
<div id="about">
<h2>About Us</h2>
<p>Under Pressure ™ was founded in 2013. We believe blood pressure measurement should be accessible, easy, and affordable for people everywhere!</p>
<h2>Quality</h2>
<p>Our cuffs are made from durable materials and are built to last. Each cuff comes with a lifetime warranty. </p>
<h2>Questions?</h2>
<p>If you have any questions or concerns about our products please don't hesitate to call. Our support staff are available Mon-Fri 7am-7pm EST, Sat-Sun 9am-5pm EST.</p>
</div>
<div class="bottom">
<div class="caption-video">
<div class="caption">
<h2 id="how-to-use">How to properly use your blood pressure cuff:</h2>
</div>
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/wV75pey4u84?si=4UuJmQClMWqSFjLE" id= "video" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</div>
<div class="pricing" id="pricing">
<div class="pricing-1">
<h3>Single Cuff</h3>
<p>$20 each</p>
</div>
<div class="pricing-2">
<h3>Two Cuffs</h3>
<p>$36 total</p>
</div>
<div class="pricing-3">
<h3>Bulk Purchase</h3>
<p>Discounts available, call for exact pricing.</p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
CSS
* {
margin: 0;
font-family: Georgia;
}
.header {
width: 100%;
height: 150px;
background-color: rgb(200, 200, 200);
padding-left: 40px;
padding-right: 40px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
main {
background-color: rgb(0, 225, 225);
margin-top: 150px;
}
#header-img {
width: 150px;
}
.logo-tm {
display: flex;
}
.tm {
display: flex;
flex-direction: column;
justify-content: center;
Align-items: center;
padding-left: 30px;
}
.header h1 {
padding-bottom: 5px;
}
.header h4 {
padding-top: 5px;
}
ul {
list-style: none;
font-size: 30px;
}
li {
display: inline;
padding-left: 50px;
padding-right: 50px;
}
.title {
text-align: center;
padding-top: 30px;
padding-bottom: 20px;
}
.form {
font-size: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.email-label, .email-input {
padding-bottom: 5px;
}
#email {
height: 1.3rem;
width: 200px;
}
#submit {
height: 1.8rem;
width: 100px;
}
.bottom-half {
margin: 20px 40px;
}
#about h2 {
padding-bottom: 10px;
}
#about p {
font-size: 20px;
padding-bottom: 25px;
}
#how-to-use {
padding-top: 50px;
padding-bottom: 15px;
}
.bottom {
display: grid;
grid-template-columns: 700px 400px;
padding-bottom: 50px;
}
.caption {
display: grid;
grid-column: 1 / 2;
}
.video {
display: grid;
grid-column: 1 / 2;
}
.pricing {
grid-column: 2 / 3;
.pricing-1 h3 {
font-size: 30px;
padding-bottom: 5px;
}
.pricing-1 p {
font-size: 24px;
}
.pricing-2 h3 {
font-size: 30px;
padding-bottom: 5px;
}
.pricing-2 p {
font-size: 24px;
}
.pricing-3 h3 {
font-size: 30px;
padding-bottom: 5px;
}
.pricing-3 p {
font-size: 20px;
}
.pricing-1 {
height: 150px;
width: 300px;
border: 3px dashed black;
margin-bottom: 25px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(175, 0, 0);
}
.pricing-2 {
height: 150px;
width: 300px;
border: 3px dashed black;
margin-bottom: 25px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(175, 0, 0);
}
.pricing-3 {
height: 150px;
width: 300px;
border: 3px dashed black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background-color: rgb(175, 0, 0);
}
@media screen and (max-width: 1100px) {
.pricing-1 h3 {
font-size: 24px;
padding-bottom: 5px;
}
.pricing-1 p {
font-size: 20px;
}
.pricing-2 h3 {
font-size: 24px;
padding-bottom: 5px;
}
.pricing-2 p {
font-size: 20px;
}
.pricing-3 h3 {
font-size: 24px;
padding-bottom: 5px;
}
.pricing-3 p {
font-size: 20px;
}
.pricing-1 {
width: 200px;
}
.pricing-2 {
width: 200px;
}
.pricing-3 {
width: 200px;
}
}