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
farah hussain
9,218 PointsThe background is remaining Navy blue at all sizes. I'm unable to find any errors with my code.
This is my code:
@media screen and (min-width: 480px){ body { background: green; } }
farah hussain
9,218 PointsIt is at the top of a new css file
Jawann Carmona
19,556 PointsCan you place your code here? Basically, your media query should be the last thing read in a CSS file. Else, it will not have priority over other stylesheet rules.
5 Answers
Tresean Adam
6,216 PointsYour media query should be just @media ... or @media and screen ... then it should work.
gabriel cajigas
1,041 PointsI am having the same problem.
this is my code : @media screen and (min-width: 480px) {
body {
background: navy;
}
}
it's on a new css file that is the last stylesheet.
Ayesha Azam
Courses Plus Student 222 PointsI am also having same problem with media screen, no matter what i do it is navy color for all sizes:
my code:
@media screen and (min-width: 480px) {
body{
background: navy;
}
}
and my responsive.css is after the main.css, like below: <link rel="stylesheet" href="css/main.css"> <!--should be after normalize.css, as we will be overwriting some rules--> <link rel="stylesheet" href="css/responsive.css">
What mistake I am making then i can't see. Will be grateful for the help!
Jawann Carmona
19,556 PointsBy declaring (min-width: 480px), you are telling the browser that above 480 px, everything should have the background color of navy.
If you wanted the background color to be navy at any screen size below 480px, you would set it to (max-width:480px). Then you could set your other sizes above that to change the background color based on say a (min-width: 700px) and (min-width:1000px).
Does that make sense?
nguoisechia .com
Front End Web Development Techdegree Student 30,943 PointsTry 750px
David Pinner
7,039 PointsI just followed Jawann Carmona and put it to the bottom of the page and it sorted everything out.
Jawann Carmona
19,556 PointsJawann Carmona
19,556 PointsAre you placing this media query at the bottom of the CSS file?