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

Colton Mountain
Colton Mountain
649 Points
Posted by Colton Mountain
Colton Mountain
649 Points

Responsive web design - media query

Okay, so my question was

"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."

But I'm completely clueless on what I need to add within the media query. I've rewatched the tutorial several times and still cannot figure it out.

 /* Mobile ----------- */
    @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%;
}
#logo img {
    max-width: 100%;
}
#nav ul {
    margin: 5% 0;
}

#nav ul li a {
    -webkit-user-select: none;
    font-size: 0.750em;
}

#nav ul li {
    float: left;
    margin: 5% 0;
    }
    #nav ul  li.about {
        width: 20%;
        text-align: left;
    }
    #nav ul  li.pricing {
        width: 55%;
        text-align: center;
    }
    #nav ul  li.locations {
        width: 25%;
        text-align: right;
    }
    #nav ul  li.contact {
        width: 100%;
        margin: 0;
        font-size: 1em;
    }


#intro, #about {
    display: none;
}
#featured-cupcake, #new-cupcakes {
    margin: 5% 0;
}

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

Without a link to the code challenge you are having issues with someone would have guess which one it is, to be able to test out their solution.

1 Answer

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

I think your almost their with the width: 100%. But you first need to have your media queries at the bottom to get in the habit and doing it according to the web standards. Now if you think about what the challenge is asking, it wants you to apply the change to the classes called menu and contact. So the easiest way to do it would be to first write that out in normal CSS then wrap the media query around it. So 

.menu, .contact {
    width: 100%;
}

So then to include this in a media query you do this

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

Here are some resources to get a better understanding of media queries. w3c mdn

Hope this helps any questions you have please send them my way