Product Landing Page -- HELP!

HTML-CSS
#1

I have almost completed my Product Landing Page project, but can’t figure out why it won’t pass the media query test. There is definitely one in there and I know I don’t have a type, because I finally gave up and cut and pasted that little section from the example page. I have no idea why it won’t pass the test. (User story #14) Please help!

Here is my page: https://codepen.io/AmandaP730/pen/dKVyME

Thanks!
Amanda

#2

Media queries are they’re own element. You never put them in another tag. Take it out of your video element.

1 Like
#3

I tried moving it to its own element but it still didn’t pass the test. I double checked it’s location in the sample page given (which passes all the tests) and it is part of the header CSS, which is where I originally had it. This is very frustrating…

(Thanks for the suggestion, btw! Appreciate the response!)

#4

Hi,
In your CSS file, you have two brackets before the @media query.

There should only be one bracket for the initial stylesheet
#header {
some styling rules;
}

Then you media query would have one set for itself, and one for each element:

@media only screen and (max-width: 600px) {
#header {
some new styling rules;
}
#header-img {
some more new styling rules;
}
} // close media query

I had a hard time with this concept when I first began, so now it’s the first thing I look at when I run into issues with it.

I hope this helps.

#5

Woot! That finally worked! Thank you!

1 Like
#6