Tell us what’s happening:
how can i add media query to my product landing page?
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
Challenge: Responsive Web Design Projects - Build a Product Landing Page
Take a look at this w3schools article on media queries. It should help you write one.
It would also help if you shared your code.
To format your code, put three back tics at the start and end of your code. Or highlight the pasted code and press the button that looks like this </>.
So, your media query is correctly written. The issue isn’t your media query, the problem is your css has syntax mistakes. You can use a css validator like this one to test css code.
Your display:flex has no selector. It needs to target part of your html.
You are also missing a bracket between your nav rule and media query rule. This will stop the media query working correctly.
<style>
nav {position: fixed}
display: flex;
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
</style>
I would also advise putting your css in the css file, not as part of the html inside a style element.
Using a separate css file is easier and standard practice. You’ve included a link to the css file in your html, so it is just a matter of moving the code to the css file.
Okay, I’ve found your forum post on that issue and will take a look.
You can link people directly to your forum posts. Copy the link from the search bar and past it into your reply. This makes it easier to find your post.