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

Posted by Marisa Zantey
Marisa Zantey
2,053 Points

Media query code??

Why does my code not work?? I've copied this just as the teacher has, but it isn't working. Yes, I have tried refreshing the page :/

@media screen and (min-width: 480px) {
  body {
  background: navy; 
  }
}

@media screen and (min-width: 660px) {
  body {
   background: darkgreen; 
  }
}
Marcus Parsons
Marcus Parsons
15,719 Points

Those media queries are done correctly. Can you please post a snapshot to your workspace? If you don't know how to do that, check this post out: http://www.teamtreehouse.com/forum/workspace-snapshots

Marisa Zantey
Marisa Zantey
2,053 Points

https://w.trhou.se/xha63tvyfq

I think I took the snapshot right!! :/

2 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

Marisa,

I found the problem. After being able to see your workspace, I noticed that the "responsive.css" file isn't in the folder of "css" and you have it referenced on the page as being "css/responsive.css". If you just click and drag the file up to that folder, it will become a part of the folder, or you can change the href of your link code from "css/responsive.css" to "responsive.css". I would group them together though.

A couple ways to tell if a file is a part of a folder, especially in Workspaces, is to look and see if it is grouped with the other files in the folder because they'll have the same indentation. Also, click the arrow beside "css" and if "responsive.css" doesn't hide/show with the other files, it's not in that folder.

Once I did that, I was able to see the media query execute. :)

Marisa Zantey
Marisa Zantey
2,053 Points

Thankyou so much!! :)

Marcus Parsons
Marcus Parsons
15,719 Points

You are very welcome, Marisa! Happy Coding! :)

Mat Morris
Mat Morris
10,292 Points
Mat Morris
Mat Morris
10,292 Points

There are many things it could be since I don't know the context in which this question is being asked so I'll give you multiple answers haha. If any of you see something wrong with my answer(s) please let me know! :) THANKS!

  • The only way you will actually see these changes is when your screen is bigger than the 480px that you have specified, if the browser window on your computer is smaller then you won't see the changes.

  • Which course and lesson are you in? I noticed that when I was doing some of the coding sections it asked to provide a media query that was aimed at 'all' devices. Since 'all' is the default expression all you would need to write is the min-width and max-width expressions in your code. So it should be: 

@media (min-width: 480px) {
  body {
  background: navy; 
  }
}

@media (min-width: 660px) {
  body {
   background: darkgreen; 
  }
}
  • Also, make sure that you have a <body> tag in your html file.

I'm only guessing that this is what they want since there isn't anything in your question about which lesson, but if you take a snapshot of your quiz page or WorkSpace that would help us answer your question better!