Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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

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

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

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

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.

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

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

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?

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

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.

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!

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

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