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!

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

Terence Wayburne
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Terence Wayburne
Full Stack JavaScript Techdegree Graduate 31,428 Points
Posted by Terence Wayburne
.a{fill-rule:evenodd;}techdegree seal-36
Terence Wayburne
Full Stack JavaScript Techdegree Graduate 31,428 Points

Create a media query that targets all devices when the viewport width is 1020px or less. Inside the media query, select

@media (max-width:1020px) { .main-header { background: tomato; color: white; } }

Not working...?

rydavim
rydavim
18,811 Points
rydavim
rydavim
18,811 Points

Your code works for me. Could you post the rest of your code and files?

Are other styles in the same file being applied successfully?

Are you overriding these styles with something more specific elsewhere?

Terence Wayburne
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Terence Wayburne
Full Stack JavaScript Techdegree Graduate 31,428 Points
Terence Wayburne
.a{fill-rule:evenodd;}techdegree seal-36
Terence Wayburne
Full Stack JavaScript Techdegree Graduate 31,428 Points

Hey Rydavim,

Thanks for the fast response. I have a feeling there is something wrong with the program as I simply copied someone elses code (exactly the same as mine) and for some reason it worked.

This is the second time this has happened to me! Very annoying when i spend minutes feeling idiotic for potentially missing a colon somewhere!

tobart
tobart
13,275 Points

Hey Terence, figured it out, due to the fact that i stumbled upon. It worked for me when i typed a blank between max-width and the value, as following:

@media (max-width: 1020px) {
    .main-header {
    background-color: tomato;
    color: white;
  }
}

Hope it works, keep me posted! Cheers T!

Terence Wayburne
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Terence Wayburne
Full Stack JavaScript Techdegree Graduate 31,428 Points
Terence Wayburne
.a{fill-rule:evenodd;}techdegree seal-36
Terence Wayburne
Full Stack JavaScript Techdegree Graduate 31,428 Points

Hey Tobart,

Thanks for the fast response. I have a feeling there is something wrong with the program as I simply copied someone elses code (exactly the same as mine) and for some reason it worked.

This is the second time this has happened to me! Very annoying when i spend minutes feeling idiotic for potentially missing a colon somewhere!

3 Answers

tobart
tobart
13,275 Points
tobart
tobart
13,275 Points

Hi Terence, might this work?

@media all and (max-width:1020px) {
 .main-header { 
background: tomato; 
color: white; } 
}

or

@media screen and (max-width:1020px) {
 .main-header { 
background: tomato; 
color: white; } 
}

Also there is an excerpt about the all expression on mdn

Keep me posted about the progress, best T!

Phillip Rauschkolb
Phillip Rauschkolb
6,309 Points
Phillip Rauschkolb
Phillip Rauschkolb
6,309 Points

I believe this is a bug, as the answer is accepted when you put a space between 'max-width:' and '1020px'....but it works without that space and should be an acceptable answer. Thanks tobart for figuring that out!

Elfar Oliver
Elfar Oliver
3,923 Points
Elfar Oliver
Elfar Oliver
3,923 Points

I know I'm replying a bit late and someone already answered, but the correct one was

@media (max-width: 1020px) { .main-header { background-color: tomato; color: white; } }

with a space between: width: and 1