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 trialiwgpnjvycw
8,577 PointsI've tried using both Chrome and Firefox, but the breakpoint tests don't show up when I resize the screen.
Here's the code I used
@media screen and (min-width: 480px) {
body {
background: navy;
}
}
@media screen and (min-width: 660px) {
body {
background: darkgreen;
}
}
iwgpnjvycw
8,577 PointsI was trying to make sure the media queries were actually working, but the test background colors weren't showing up for me.
7 Answers
Rich Bagley
25,869 PointsHi Bianca,
I've just dropped this in to CodePen and it seems to work fine. The background starts as darkgreen and doesn't change to navy until it hits 660px wide.
Is that what you were expecting it to do?
-Rich
iwgpnjvycw
8,577 PointsThanks for checking! That's what it's supposed to do. I wish I could actually see it.
Dennis Le
12,872 PointsThe code looks good! from the information you provided. Did you zoom in and out on your screen while on Chrome and Firefox? Try something simple first:
On MAC: Command and Zero at the same time to reset your screen view while you are on chrome/firefox.
iwgpnjvycw
8,577 PointsThanks for the tip! But somehow it still doesn't want to show up for me. I tried zooming in and out, and resetting the screen view...
Leigh Maher
21,830 PointsHi Bianca, just to let you know it's not something specific to your computer. I'm having the exact same issue.
Leigh Maher
21,830 PointsHi Bianca, I've just found what I've been doing wrong: I had the responsive.css loading before the main.css. It should be in this order:
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
Maybe this will help?
iwgpnjvycw
8,577 PointsHi Leigh, I've checked and everything appears to be in the right order. Thanks for the suggestion!
Michael Gordon
5,537 PointsHi Bianca, you might have this solved already but check that you have the responsive.css file in your css folder as per your code:
<link rel="stylesheet" href="css/responsive.css">.
Might sound obvious but easily overlooked.
iwgpnjvycw
8,577 PointsYes, it's so easy to overlook the little details! But, yeah, the responsive.css is in the main.css folder. Thanks for the suggestion!
Rafał Marciniak
1,517 Pointshad the same kind of problem. don't know if it's my luck or i did something right.
1. i've addes ../ to my code as below
<link rel="stylesheet" href="../css/responsive.css">
2. ctr+R on the Mozilla web browser and it worked
3. next i've deleted ../ to see the difference (so back to the code from the tutorial as below)
<link rel="stylesheet" href="css/responsive.css">
and it worked.... both with ../ or without it want to help more but i don't know how it could happened
anithapalanismay
3,837 PointsAnybody knows what is wrong with the code. For me, It's working in safari, but not working in chrome and firefox. It's strange. I tried refreshing and zooming in, but no result. Can anyone please explain why it is happening like this and help me out?
Thanks, Anitha
Maor Tzabari
1,762 PointsMaor Tzabari
1,762 PointsYou're code is working fine, what are you trying to achieve?