Product Landing Page: @media query help

Product Landing Page: @media query help
0

#1

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/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/


#2


@media screen and{max-width: 800px}{
...Your css here...
}