Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Marwan Solh
Marwan Solh
2,057 Points

Why is this not working?

I am having difficulties with the following question:

Create a media query that targets all devices when the viewport width is 1020px or less. Inside the media query, select the .main-header element. Set the background color to tomato and the text color to white.

My answer which is incorrect is:

@media (max-width: 1020px) { .main-header: { background-color: tomato; color: white; } } what is wrong with this?

4 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! Well, we both thought it looked correct and we were both wrong! :smiley:

You have an extra colon which is causing an error. Take a look at your selector. You typed:

 .main-header: { /* note the extraneous colon here */ 
    background-color: tomato; 
    color: white; 
}

It should be:

 .main-header { /* removal of the colon */
    background-color: tomato; 
    color: white; 
}

Hope this helps! :sparkles:

Sometimes a second pair of eyes is all you need! :eyes:

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! Your code looks correct so I'm going to go out on a limb here and make an educated guess. I'm willing to bet that you put that media query at the top of the file. If this is the case, then remember the cascading nature of CSS. Those rules are very likely being overwritten by rules below it.

Try placing your media query at the bottom of the file! :sparkles:

Marwan Solh
Marwan Solh
2,057 Points
Marwan Solh
Marwan Solh
2,057 Points

Hi Jennifer, thanks for your response.

Putting it at the bottom did not work. This is the first code challenge at the end of the Media Query section of the CSS basics course. So it's the only code in the CSS file. I tired placing it in different places of the field and it still did not work.

Marwan Solh
Marwan Solh
2,057 Points
Marwan Solh
Marwan Solh
2,057 Points

ahh. Thank you so much!