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 CSS Basics (2014) Enhancing the Design With CSS Adjusting the Layout with Media Queries

Michael Rockett
Michael Rockett
40,365 Points
Posted by Michael Rockett
Michael Rockett
40,365 Points

Hi, why are my media queries not working?

The color of the text changes which I set up just to test but nothing else does. Heres a bit of the code,

@media (max-width: 480px) {
  #about {
   color: green;
   width:100%;
   float: none;
 }

  nav ul li {
  font-size: 0.7em;
  color: green;
  }

}
hum4n01d
hum4n01d
25,493 Points

Would you please mark one of the answers as best or answer saying you figured it out and mark it as best so that people like me trying to help out in the forum don't accidentally try to answer the question for you?

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Hi Michael,

I changed your code for you to make it a bit clearer. Have a look at the forum Markdown Cheatsheet to see how to add code to the forums. :)

Are you sure the media query isn't working for you?

If the text color really is changing to green then you should notice the change to the font size too and the float property doesn't look like its going to change much for you.

Your width property will either span the entire browser width or the width of containing element.

Hope this helps. :)

Michael Rockett
Michael Rockett
40,365 Points
Michael Rockett
Michael Rockett
40,365 Points

Hi,

Thanks for the reply, heres all the code I've got for the responsive part of my css. Its definetly not working, I just can't understand why because the colors are changing but nothing else does anything. I added the rest of the code to explain why I was using float: none;

I have 2 div elements one with the id about and the other with the id gigs, they float side by side in two columns but when the veiw port is less than 480px I want them to be on top of each other, as one column. 

@media (max-width: 960px) {
 #about {
   color: red;
 }

 section {
 width: 90%;
 }

}

@media (max-width: 480px) {
 #about {
   color: green;
   width:100%;
   float: none;
 }

  #gigs {
   color: green;
   width:100%;
   float: none;
 }

  nav ul li {
  font-size: 0.7em;
  color: green;
  }

  section {
  width: 100%;
  }


}
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Try removing the float declarations altogether from inside your 480px media query? :-)

Hopefully your elements will then stack on top of eech other. :-)

Michael Rockett
Michael Rockett
40,365 Points
Michael Rockett
Michael Rockett
40,365 Points

It's all good I have figured it out, it was because I added the responsive.css file after main.css in the head of the html document.

Thanks for your help