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 Alex Coven
Alex Coven
1,345 Points

Adaptive Design 2/3

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.

Cant seem to pass this excercise, can anyone help me correct my code?

 @media screen and (max-width : 480px) {
      .grid_1,
      .grid_2,
      .grid_3,
      .grid_4,
      .grid_5,
      .grid_6,
      .grid_7,
      .grid_8,
      .grid_9,
      .grid_10,
      .grid_11,
      .grid_12 {
    width:100%;
      }
        #menu {
        max-width: 100%;
      }
        #contact: 
          max-width: 100%;
}
John Rugge
John Rugge
6,671 Points

those were defined as classes and not id's so you would need to put the . (dot) instead of the # (hash tag) .

menu { max-width: 100%; } .contact: max-width: 100%; }

3 Answers

Alex Coven
Alex Coven
1,345 Points

Never mind i got it! Used max-width insteat of width, thank you so much!

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

You're using id instead of a class. It should be .menu and .contact. Try using this:

     .contact, .menu{
          width:100%
       }
Alex Coven
Alex Coven
1,345 Points
Alex Coven
Alex Coven
1,345 Points

I still cant get it to work

Xavier Avery
Xavier Avery
8,059 Points
Xavier Avery
Xavier Avery
8,059 Points

ya i can't get pass this one either...