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 John Levy
John Levy
1,451 Points

How to add media queries to my code?

I added media queries to one of my pages but now for some reason it is not working. I have attached my code and a couple of the media queries. Am I on the right track or am I laying it out wrong? I have attached my code below with h1 and the nav li at the bottom of the CSS page which I am trying to change when the page goes down to 320px. Why do I not see changes when I go down to 320px? http://codepen.io/Johned22/pen/vKzAyd Thanks in advance

5 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! Jason Anders is correct. You're missing a closed curly brace. But besides that there's a long list of random numbers in the middle of your CSS and I have no idea why. I'm guessing they were meant to be commented out. But that's what's causing your media query to not be activated. They are between lines 403 and 415. I commented them out, added the closing curly brace and your gray background shows up when reducing the screen.

/*
2560    
1920 px
1600
1366
1280
1000
900px
800
768
414 
375
360
320
*/

Hope this helps! :sparkles:

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,863 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points

Hey John,

It looks like you aren't closing out the Media Query. (Missing a closing curly brace). All your rules are closed out, jut add a curly brace to the very last line to close the Query and it should work. :)

Keep Coding! :dizzy:

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for the response. So should it look like the code below as it still does not work when I take it down to 320px?

@media only screen and (max-width: 320px) {   /* turns to grey on mobile divices*/
    body {
        background-color: grey;
    }

    .nav > li {
    font-size: 13px;
    padding: 0px 15px 0px 15px;
    margin: 0 0 0 0;
    }

    h1 {  
  font-size: 10px;      /*begin your journey*/                
  color: red;
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1.3;
  text-align: center;
  margin: 6px 0 0;
  padding-top: 10px;
  width: 320px;
}
}
Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points

Correct, but I think your break-point may be too low. Granted I don't do much front-end design work, but try changing your break-point from 320 to 460 and see if that helps.

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Yeah it still doesn't work when I change it to 460. I will keep looking.

Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points

Besides the curly brace, sorry I couldn't be more help. :(

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks Jennifer. When commenting the numbers out it works, thanks again.