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
Francisco Sandoval
5,657 Points@media stuck
<meta charset="utf-8">
<title>Francisco Sandoval | designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
@media screen and (min-width: 480px) {
body { background:navy;}```
}
my background doesn't change color with screen change.
Help please.
9 Answers
Jason Anello
Courses Plus Student 94,610 PointsDo you have that media query in your css file?
Francisco Sandoval
5,657 PointsYes in the new file responsive.css
Jason Anello
Courses Plus Student 94,610 PointsDo you have any rules earlier in that file or in the "main.css" file that set the body background color?
If you have a selector with higher specificity further up then that could be the reason you don't see the change.
If you have something like this
html body {
background: green;
}
@media screen and (min-width: 480px) {
body {
background:navy;
}
}
then you'll never see the navy color.
Francisco Sandoval
5,657 PointsJoshua, which hyphen? min-width: 480px? No it doesn't work. Jason, I following Nick pettit as he does it, thus I believe so, I will check.
Thanks
Jason Anello
Courses Plus Student 94,610 PointsJoshua might have meant the backtick? You have 3 backticks in your media query. Was this a code posting error or do you really have them in your css?
Maybe tell us what background color you see at a wide screen resolution and what you see when below 480px.
Do you have this on workspaces and is there a link where we can preview or do you have this live somewhere? It would be easier to track down the problem.
Francisco Sandoval
5,657 Pointsmain.css had
background-color:#fff;
color:#999;}```
I removed it and it didn't make a difference, so I went back and re entered it.
Jason Anello
Courses Plus Student 94,610 PointsIn that case it would be fine because both use the same selector body So the styles that appear farther down will take effect.
My only suggestion is to tell us what colors you see below 480 and above or put this up on workspaces assuming we can view it. I haven't used it yet so I don't know.
I made a codepen demo which I think has the css you've shown so far and it seems to be working. I see the white background when my browser width is below 480px
Francisco Sandoval
5,657 PointsThat is a posting error.
Jason Anello
Courses Plus Student 94,610 PointsI get an error that the page doesn't exist.
Francisco Sandoval
5,657 PointsI don't know how to let you access my workspace. I only see white background at any size. I guess I will just continue on like this for now. Thank you
Francisco Sandoval
5,657 PointsI got it, my responsive.css file wan't in my CSS folder. Thank you guys.
Jason Anello
Courses Plus Student 94,610 PointsCompletely forgot about that. Glad you got it working.
Gage Smith
6,529 PointsThanks for posting your resolution for this issue. I have been racking my brain for two weeks (not constantly) trying to figure out why my media queries wouldn't work.
JOSHUA OBRIAN
Courses Plus Student 7,491 PointsJOSHUA OBRIAN
Courses Plus Student 7,491 Pointstake out the hyphens
@media screen and (min-width: 480px) { body { background:navy;} }