Hi,
I’m trying to complete the product landing page challenge but I can’t get my @media query to work. I’ve tried everything. I have even copied the code from the example to try and get it to work but nothing is happening. Please help as I don’t know what I’m doing wrong.
Thank you.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Product Landing Page</title>
<link rel="stylesheet" type="text/css" href="product.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
</head>
<body>
<header id="header">
<div id="image"><img id="header-img" src="https://www.logomoose.com/wp-content/forum/uploads/2013/04/chocoholic.jpg"></div>
<nav id="nav-bar">
<a class="nav-link" href="#about-us">About Us</a>
<a class="nav-link" href="#products">Products</a>
<a class="nav-link" href="#pricing"> Pricing</a>
</nav>
</header>
<section id="about-us">
<h1> Welcome to Chocolic! </h1>
<p id="into"> Here at Chocolic we make tailor made luxury chocolate delivered to your door! Our chocolate makes for the perfect gift no matter what the occasion! Please take a look at our video below to see how we create our chocolate.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/xPe1jMuX32s" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</section>
<h2 id="prod-head">Products</h2>
<section id="products">
<p id="cookie"> <i class="fas fa-cookie-bite"></i> It's not only chocolate that we make. Our range varies from cakes to cookies!</p>
<p id="home"> <i class="fas fa-home"></i>Our chocolate gift boxes are designed so that they can fit through your letter box which makes getting your delivery even easier.</p>
<p id="clock"> <i class="fas fa-clock"></i>We aim to get our deliveres out within 2-3 working days which is perfect for a last minute gift/</p>
</section>
<section id="pricing">
<h2>Pricing</h2>
<p>Prices vary depending on what product it is or how much personalisation is going into the product but here is a rough guide</p>
<ul>
<li>Standard Chocolate Bar - £4</li>
<li>Easter Egg - £6</li>
<li>Box of cookies - £6</li>
<li>Box of cupcakes - £6</li>
<li>Birthday Cake - £15</li>
</ul>
</section>
<div id="email">
<p> <strong>Please enter your email adress to stay up to date with new products and special offers!</strong></p>
<form id="form" action="">
<input type="email" id="email" placeholder="enter email">
<button type="submit" id="submit" action="https://www.freecodecamp.com/email-submit">Submit</button>
</form>
</div>
</body>
</html>
CSS
body{
font-family: "Nunito";
background-color: #F5DEB3;
margin: 20px;
}
header{
width:100%;
background-color: white;
border: solid black 2px;
}
#image{
margin: auto;
width:500px;
}
#header-img{
margin: auto;
align-content: center;
}
#nav-bar{
margin: auto;
}
.nav-link{
text-decoration: none;
color: black;
padding-bottom: 15px;
margin: auto;
display: flex;
justify-content: space-around;
}
#about-us{
text-align: center;
margin: auto;
margin-top: 50px;
width: 60%;
}
#prod-head{
text-align: center;
}
#products{
width: 80%;
margin: auto;
margin-top: 50px;
display: flex;
flex-direction: row;
grid-gap: 20px;
}
#cookie, #home, #clock{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: solid black 2px;
width: calc(100% / 3);
margin: 10px;
background-color: white;
font-family: "Nunito";
}
@media (max-width: 800px) {
flex-direction: column;
#cookie, #home, #clock {
{ max-width: 300px; width: 100%; margin: 0 auto; margin-bottom: 10px; }
}
}
#pricing{
margin-left: 25%;
margin-top:50px;
}
#email{
text-align: center;
margin-top: 50px;
}
Code Pen: https://codepen.io/webcodinganna/pen/MqgyjQ
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.
Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page/