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


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

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) {

Yes I just now figured it out thank you.

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%; } ..... }

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

/* Mobile ----------- */
@media screen and (max-width : 480px) {
  .menu {
    width: 100%;

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.


That's it. Thanks Rob.

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:

  /* CSS Rules go here */


  • $_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