I have one more test to pass… what am I doing wrong? 
Your Product Landing Page should use at least one media query.
(This is my second post about this as I didn’t post properly the first time, hope this is better and i can get some lil hints !!)
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css"></link>
<title>Mental Health</title>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<div class="logo-container">
<img
id="header-img"
class="logo"
alt="Menatl Health logo"
loading="lazy"
width= "150"
src="https://img.freepik.com/premium-vector/mental-health-wellness-logo_1251502-1281.jpg" >
</img>
<span class="the-product">Mental Heath</span>
</div>
<ul class="nav-links">
<a class="nav-link" href="#first" >Excerises</a>
<a class="nav-link" href="#second" >Awareness</a>
<a class="nav-link" href="#third" >Health</a>
</ul>
</nav>
</header>
<h1>Mental Health is just as important as our physical health</h1>
<p>Here are some resources to help with how to look after your mentals</p>
<div class="author">
<p class="author-name">By Shian Beaumont</p>
<p clas="publish-date">March 27, 2025</p>
<section class="#Mental-Exercises" id="first">
<h2 class="list-subtitle">Mental Exercises</h2>
<p class="first-paragraph-ME">
Brain exercises are designed to maintain and strengthen cognitive abilities such as working memory, processing speed, and executive function.</p>
<p>A lot of cognitive scientists suggest that claims about the effects of brain training are often exaggerated and misleading. However, there is an abundance of research showing that how certain types of activities *can* be beneficial for your brain's health.<p/>
<p>Here are three exercises you can try at home;</p>
<ul>
<li><p>Taking care of your body! Exercise & proper nutrition, helps you become less susceptible to cognitive declines associated with ageing.</p></li>
<li><p>Challeng your brain to draw a map of your town or neighborhood from memory.
Include major streets, side streets, and landmarks.</p></li>
<li><p>Try switching hands while you are eating dinner or when you are trying to write something down. It will be difficult, but that is exactly the point.</p></li>
<img src="https://th.bing.com/th/id/R.6778412cde1986b12ffba3f24325cea6?rik=%2bJKv3QdLTavCzA&pid=ImgRaw&r=0"
id="writing-image"
class="writing-image"
alt="woman writing"
loading="lazy"></img>
</section>
<section class="Mental-Awareness" id="second" >
<h2 class="mental-awareness">Mental Awareness</h2>
<p class="second-paragraph-MA">Become more observant of your surroundings and senses. In your day-to-day activities, try to take stock of the environment, your senses, and your breathing.</p>
<p> People often rush between day-to-day activities needlessly. This decreases mental awareness and can contribute to feelings of stress. Try to pause between activities.</p>
<blockquote class="mental-awareness-quote">
<hr />
<p class="quote">
"There is hope, even when you tell your brain there isnt"- John Green</p>
<hr />
</blockquote>
<p>A short video message from Bubble Light Productions to highlight Mental Health Awareness Week 2017.
Mental Health Awareness Week 2017 takes place from the 8th-14th of May across the UK.</p>
<iframe id="video" src="https://www.youtube.com/watch?v=8oog-4t9n2A" class="mental-health-transparency-video" alt="mental-health-transparency-video" loading="laxy"></iframe>
</section>
<section class="mental health" id="third">
<h2 class="mental-health">Mental Health</h2>
<p class="third-paragraph-MH">Prioritise your mental helth; you deserve to be happy.</p>
<p>Sleep well: Good quality sleep is a key factor in supporting your mental health and wellbeing. It can help with your mood, your memory and your ability to manage stress.</p>
<p>Staying in contact with people is also important. Talk to people you work with or friends about how you're feeling.</p>
<img src="https://th.bing.com/th/id/OIP.Hr7L7oSIaH1YPH7-J68TdwHaE7?w=600&h=399&rs=1&pid=ImgDetMain"
id="sleeping-image"
class="sleeping-image"
alt="man sleeping"
loading="lazy"></img>
</section>
<form
id="form" action="https://www.freecodecamp.com/email-submit">
<h2 class="feedback">Feedback</h2>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Email" ></input>
<input id="submit" type="submit" action="https://www.freecodecamp.com/email-submit">
</input>
</form>
</body>
</html>
:root{
--white: white;
--grey: grey;
--pale: hsl(200, 50%, 50%)
}
*,
::before
::after{
box-sizing: border-box;
}
body {
color: linen;
background-color: var(--pale);
font-family: Raleway;
font-size: 1.5rem;
}
#header-img{
width: 140;
object-fit: contain;
}
#nav-bar{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: fixed;
width: 100%;
top: 0;
background-color: var(--grey);
position: fixed;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links a{
text-decoration: none;
color: var(--white);
}
.logo-container{
display: flex;
align-items: center;
}
.the-product{
font-size: 50px;
margin-left: 50px;
font-weight: 700;
font-family: fantasy;
}
h1{
color: black;;
font-family: Anton;
align-items: center;
}
h2{
color: black;;
font-family: Anton;
align-items: center;
text-decoration: underline;
margin-bottom: 10px
}
.quote {
color: #00beef;
font-size: 1.6rem;
text-align: center;
font-family: "Raleway", sans-serif;
section::before{
display: block;
content: " ";
margin-top: 100px;
height: 100px;
visability: hidden;
pointer-events: none;
}
section{
margin: 40px 20px;
text-align: center;
}
.icon{
color: var(--grey);
margin-right: 30px;
}
#feature {
text-align: left;
max-width: 800px;
margin: auto;
}
.feature {
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
font-family: montserrat;
}
iframe {
width: 100%
}
.header {
width: 20px;
display: flex;
position: fixed;
width: 100%;
top: 0;
left: 0;
}
@media only screen and (max-width: 550px){
.header {
width: 20px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0
Challenge Information:
Product Landing Page - Build a Product Landing Page
You have one missing curly brace in your CSS code, which is throwing a lot of the tests.
Go through and check each pair of braces, to find the missing one.
If you insert it, you should pass all tests.
1 Like
Your media query is structured correctly, but it isn’t doing anything since .header already has a width of 20px. You are also missing some semicolons in your stylesheet and one of the properties is misspelled. And in your HTML, you are using closing tags for void elements that do not require closing tags.
1 Like
Thank you both for you advice, I think I’ve sorted all of my HTML bugs. I’ve narrowed my CSS down a bit as I was overwhelming myself, but my code still will not pass? Could you dumb down what a media query is? I’ve been taking notes but still don’t fully understand the reason or function of it…
(Thank you so much, im literally nearly in tears and second guessing everything, i want a career out of this so bad, when i get something right im so happy but when i get stuck i get so upset with myself 
:root{
--white: white;
--grey: grey;
--pale: hsl(200, 50%, 50%);
}
.*{
box-sizing: border-box;
scroll-behaviour: smooth;
}
body {
color: linen;
background-color: var(--pale);
font-family: Raleway;
font-size: 1.5rem;
}
#header-img{
width: 140;
object-fit: contain;
}
#nav-bar{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: fixed;
width: 100%;
top: 0;
background-color: var(--grey);
position: fixed;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links a{
text-decoration: none;
color: var(--white);
}
.logo-container{
display: flex;
align-items: centre;
}
h1{
color: black;
font-family: Anton;
align-items: centre;
}
h2{
color: black;
font-family: Anton;
align-items: centre;
text-decoration: underline;
margin-bottom: 10px;
}
.quote {
color: #00beef;
font-size: 1.6rem;
text-align: centre;
font-family: "Raleway", sans-serif;
section {
margin: 40px 20px;
text-align: centre;
}
@media all and (max-width: 500px) {
.quote{
width: 50px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css"/>
<title>Mental Health</title>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<div class="logo-container">
<img
id="header-img"
class="logo"
alt="Menatl Health logo"
loading="lazy"
width= "150"
src="https://img.freepik.com/premium-vector/mental-health-wellness-logo_1251502-1281.jpg" />
<span class="the-product">Mental Heath</span>
</div>
<ul class="nav-links">
<a class="nav-link" href="#first" >Excerises</a>
<a class="nav-link" href="#second" >Awareness</a>
<a class="nav-link" href="#third" >Health</a>
</ul>
</nav>
</header>
<h1>Mental Health is just as important as our physical health</h1>
<p>Here are some resources to help with how to look after your mentals</p>
<div class="author">
<p class="author-name">By Shian Beaumont</p>
<p clas="publish-date">March 27, 2025</p>
<section class="#Mental-Exercises" id="first">
<h2 class="list-subtitle">Mental Exercises</h2>
<p class="first-paragraph-ME">
Brain exercises are designed to maintain and strengthen cognitive abilities such as working memory, processing speed, and executive function.</p>
<p>A lot of cognitive scientists suggest that claims about the effects of brain training are often exaggerated and misleading. However, there is an abundance of research showing that how certain types of activities *can* be beneficial for your brain's health.<p/>
<p>Here are three exercises you can try at home;</p>
<ul>
<li><p>Taking care of your body! Exercise & proper nutrition, helps you become less susceptible to cognitive declines associated with ageing.</p></li>
<li><p>Challeng your brain to draw a map of your town or neighborhood from memory.
Include major streets, side streets, and landmarks.</p></li>
<li><p>Try switching hands while you are eating dinner or when you are trying to write something down. It will be difficult, but that is exactly the point.</p></li>
<img src="https://th.bing.com/th/id/R.6778412cde1986b12ffba3f24325cea6?rik=%2bJKv3QdLTavCzA&pid=ImgRaw&r=0"
id="writing-image"
class="writing-image"
alt="woman writing"
loading="lazy"/>
</section>
<section class="Mental-Awareness" id="second" >
<h2 class="mental-awareness">Mental Awareness</h2>
<p class="second-paragraph-MA">Become more observant of your surroundings and senses. In your day-to-day activities, try to take stock of the environment, your senses, and your breathing.</p>
<p> People often rush between day-to-day activities needlessly. This decreases mental awareness and can contribute to feelings of stress. Try to pause between activities.</p>
<blockquote class="mental-awareness-quote">
<hr>
<p class="quote">
"There is hope, even when you tell your brain there isnt"- John Green</p>
</hr>
</blockquote>
<p>A short video message from Bubble Light Productions to highlight Mental Health Awareness Week 2017.
Mental Health Awareness Week 2017 takes place from the 8th-14th of May across the UK.</p>
<iframe id="video" src="https://www.youtube.com/watch?v=8oog-4t9n2A" class="mental-health-transparency-video" alt="mental-health-transparency-video" loading="laxy"></iframe>
</section>
<section class="mental health" id="third">
<h2 class="mental-health">Mental Health</h2>
<p class="third-paragraph-MH">Prioritise your mental helth; you deserve to be happy.</p>
<p>Sleep well: Good quality sleep is a key factor in supporting your mental health and wellbeing. It can help with your mood, your memory and your ability to manage stress.</p>
<p>Staying in contact with people is also important. Talk to people you work with or friends about how you're feeling.</p>
<img src="https://th.bing.com/th/id/OIP.Hr7L7oSIaH1YPH7-J68TdwHaE7?w=600&h=399&rs=1&pid=ImgDetMain"
id="sleeping-image"
class="sleeping-image"
alt="man sleeping"
loading="lazy"/>
</section>
<form
id="form" action="https://www.freecodecamp.com/email-submit">
<h2 class="feedback">Feedback</h2>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Email" />
<input id="submit" type="submit" action="https://www.freecodecamp.com/email-submit">
/>
</form>
</body>
</html>
Chin up! You can do this! Just keep at it. Believe me, we’ve all felt frustrated with ourselves at one time or another in our coding journey.
Media queries assist with responsive design.
As you resize your browser window, you might see that your header font is way too large as the width decreases. You can then use a media query to change the rules in your header selector to reduce the size of that font when the width hits a specific value. That’s just one of many ways you can use a media query to make your pages look good at any screen width. You might also want to adjust the number of columns in a CSS grid, etc.
You can even use multiple media queries in your stylesheet to take better control of your selector rules at different screen widths, orientations, etc. For example, you might have a set of media queries like this in one stylesheet:
@media only screen and (max-width: 720px) {}
@media only screen and (max-width: 600px) {}
@media only screen and (max-width: 550px) {}
@media only screen and (max-width: 420px) {}
The Full Stack Developer curriculum has a lecture devoted entirely to this topic:
https://www.freecodecamp.org/learn/full-stack-developer/lecture-best-practices-for-responsive-web-design/how-do-media-queries-work
1 Like
As I said before, the only thing which is causing tests to fail is the missing curly brace in your CSS file (.quote selector). Fix that and you will pass.
1 Like
thank you for a deeper explanation much appreciated 
I looked over my code so much and though id fixed it! thank you and your sharp eyes 
1 Like