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

CSS How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

Posted by iwgpnjvycw
iwgpnjvycw
8,577 Points

I'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;
  }
}
Maor Tzabari
Maor Tzabari
1,762 Points
Maor Tzabari
Maor Tzabari
1,762 Points

You're code is working fine, what are you trying to achieve?

iwgpnjvycw
iwgpnjvycw
8,577 Points

I 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
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi 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
iwgpnjvycw
8,577 Points

Thanks for checking! That's what it's supposed to do. I wish I could actually see it.

Dennis Le
Dennis Le
12,872 Points
Dennis Le
Dennis Le
12,872 Points

The 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
iwgpnjvycw
8,577 Points

Thanks 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
Leigh Maher
21,830 Points
Leigh Maher
Leigh Maher
21,830 Points

Hi Bianca, just to let you know it's not something specific to your computer. I'm having the exact same issue.

Leigh Maher
Leigh Maher
21,830 Points
Leigh Maher
Leigh Maher
21,830 Points

Hi 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
iwgpnjvycw
8,577 Points

Hi Leigh, I've checked and everything appears to be in the right order. Thanks for the suggestion!

Michael Gordon
Michael Gordon
5,537 Points
Michael Gordon
Michael Gordon
5,537 Points

Hi 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
iwgpnjvycw
8,577 Points

Yes, 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
Rafał Marciniak
1,517 Points
Rafał Marciniak
Rafał Marciniak
1,517 Points

had 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
anithapalanismay
3,837 Points
anithapalanismay
anithapalanismay
3,837 Points

Anybody 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