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 Wesley Pennock
Wesley Pennock
1,141 Points

Implementing Media Queries Task 2/3

The task is "add the appropriate CSS code to the media query so that ".contact" and ".menu" fill the entire container width when the device or browser width is at most 480px wide.". I have tried 

#container menu {
max-width: 100%;
}
#container .menu {
max-width: 100%;
}

same with the contact but nothing works. What am I doing wrong?

7 Answers

Rob Simpson
Rob Simpson
3,581 Points

I am not remembering what badge this goes with, but with your code did you add the @media query?

@media screen and (max-width:480px) {
    code
}
Wesley Pennock
Wesley Pennock
1,141 Points
Wesley Pennock
Wesley Pennock
1,141 Points

Yes I just now figured it out thank you.

danbibbens
danbibbens
4,071 Points
danbibbens
danbibbens
4,071 Points

Max-width is used to tell the div/element what the width will be as the browser window is adjusted

your width will need to be 100%,

@media screen and (min-width/max-width:480px){ ..... .menu, .contact{ width: 100%; } ..... }

johnb
johnb
4,325 Points
johnb
johnb
4,325 Points

I can't figure out this problem either. This is what I have. 

/* Mobile ----------- */
@media screen and (max-width : 480px) {
  .contact
  .menu {
    width: 100%;
  }
}
Rob Simpson
Rob Simpson
3,581 Points
Rob Simpson
Rob Simpson
3,581 Points

John, you need to put a comma between the 2 classes. So right now you are saying that it is .contact .menu instead of separating them which is asked for from this. So you should have .contact, .menu { } with the way that you are styling the media query.

Hope this helps.

Rob

johnb
johnb
4,325 Points
johnb
johnb
4,325 Points

That's it. Thanks Rob.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@John & @Wesley

You can read more about the syntax of media queries over at Sitepoint

The form of a media query is:

@media $_MEDIA_TYPE $_OPERATOR ($_FEATURE: $_ATTRIBUTE)  {
  /* CSS Rules go here */
}

Where:

  • $_MEDIA_TYPE = all, screen, projector, print etc
  • $_OPERATOR = not, and, and only
  • $_FEATURE = device-width, max-width, min-resolution, min-device-pixel-ratio, orientation, etc