Question regarding media queries, and how to make them work

HTML-CSS
1

Here is an example of how media queries are used in the Product Landing Page challenge, with the media query at the bottom:

header {
position: fixed;
top: 0;
min-height: 75px;
padding: 0px 20px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #eee;
@media (max-width: 600px) {
flex-wrap: wrap;
}
}

The problem is, this doesn’t work for me. The only syntax I can make function is with the media query preceding the element like this:

@media (max-width: 600px) {
header {
}
}

The end result is that I have to have CSS for the desktop and then an additional media query like this:

body {
background-image: url(https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwallup.net%2Fwp-content%2Fuploads%2F2016%2F01%2F169819-water-waves-nature-blue-sea-sunset-sunlight.jpg&f=1);
background-size: contain;
background-repeat: no-repeat;
color: white;
margin: 0;
font-family: ‘Righteous’, cursive;
}

@media (max-width: 600px) {
body {
background-image: url(https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fwallpapershome.com%2Fimages%2Fwallpapers%2Fsea-2160x3840-5k-4k-wallpaper-ocean-water-wave-sunset-sky-rays-sun-402.jpg&f=1);
}
}

Would someone please tell me what I’m missing?

2

Please format your code in the editor. It’s very difficult to read. Even better share a codepen link to your project.

3

In the CodePen example you see the SCSS. If you click on the arrow and then “View Compiled CSS” you’ll see that the CSS is the way you say it works :slight_smile:

4

That’s how they’re supposed to work. In your post you have:

header {
position: fixed;
top: 0;
min-height: 75px;
padding: 0px 20px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #eee;
@media (max-width: 600px) {
flex-wrap: wrap;
}
}

This is wrong.

It should be like this:

header {
position: fixed;
top: 0;
min-height: 75px;
padding: 0px 20px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #eee;
}

@media (max-width: 600px) {
header{
flex-wrap: wrap;
}
}

For every element you want to have a media query for, you need to put the changes in the media query brackets as if you were writing brand-new CSS. Any previous CSS will be overwritten if the media query passes. For example:

div {
width: 800px;
height:200px;
}

h1{
color:blue;
}

@media (max-width: 600px) {
div {
width:400px;
}
}

My div on smaller screens is now only 400px wide, but it is still 200px tall. My h1 is still color blue, although I could change its color as well in the media query if necessary. I would just need to do like this:

div {
width: 800px;
height:200px;
}

h1{
color:blue;
}

@media (max-width: 600px) {
div {
width:400px;
}

h1 {
color:red;
}
}
5

Thanks everyone. I understand.