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
Terence Wayburne
Full Stack JavaScript Techdegree Graduate 31,428 PointsCreate 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...?

Terence Wayburne
Full Stack JavaScript Techdegree Graduate 31,428 PointsHey 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
13,275 PointsHey 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
Full Stack JavaScript Techdegree Graduate 31,428 PointsHey 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
13,275 PointsHi 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
6,309 PointsI 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
3,923 PointsI 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
rydavim
18,811 Pointsrydavim
18,811 PointsYour 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?