Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

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