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.

Design

Add the appropriate CSS code to the CSS to make images scale with the fluid layout.

Could someone please tell me what this means.. I though that it meant that I just have to put #nav ul li .pricing or #nav ul li.location ..... but that is not the case.. right?

8 Answers

img { margin: 2% 0; width: 100%; height: 100%; }

Like this.

No problem happy to help.

I am stuck in the same place as Mustafa Kasim... I tried this code and it told me : "Bummer! The image isn't scaling with the browser. How could you set the width of the image so that it's fluid?" This is where I entered the code:

/* Mobile ----------- */
@media screen and (max-width : 480px) {
  img { 
    margin: 2% 0; 
    width: 100%; 
    height: 100%; 
  }
}

Oh woops! I just tried entering the img code you gave alone below the p { } instead of within the mobile tags and it worked like a charm! Thanks so much!!

Thats' correct as you don't need the @media part yet.

Happy to help whenever. Just @ my name to notify me.

Thank you for the reply,

But I'm still unsure what you mean by img part of css, what does that encompass..?

Thank you for your patience...

After line 46, put in this code:

  img { 
margin: 2% 0; 
width: 100%; 
height: 100%; 

}

Well the question doesn't seem to require the .contact and .menu part. So try:

@media screen and (max-width:480px) { 
.cupcake img { display: none; }
}

also looking at your code ensure you do have the ";" after "display: none"

Mustafa Kasim

Hi Adam,

Thank you for the reply. But don't I need to put the img selector somewhere since it is asking me to, "Add the appropriate CSS code to the media query so that images within the ".cupcake" div disappear when the device or browser width is at most 480px wide."

..?

The assignment is to add the correct CSS to the media query that doesn't display the image within the '.cupcake' div, not just the div itself. The code should be applied to the image of the .cupcake class. This means that the selector would like: .cupcake img { }

Within that selector, the property of visibility should be set to none, making the code not show up entirely. There are a lot of people who are really close to getting it right, but they might not fully understand the question.

If you really don't want to think about it, the code that you need to answer the segment is:

.cupcake img { display: none; }

Could you give some context please? I don't understand what you are asking or trying to achieve.

Hi Adam,

Thank you for the reply.

Im currently on Implementing Media Queries - Building a responsive website - Challenge Task 1 of 3.

Sorry but I do not know how to upload pictures or give a snapshot or code since I don't know how to do that.

What you need to do is add the height and width properties to the img part of the CSS and give them both the value of 100%. For showing code examples you can use a site called CodePen.

Hope this helps

Sorry to keep relying on you again Adam. But I'm stuck again.

The next challenge: 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.

/* Mobile ----------- */ @media screen and (max-width : 480px) { }

I'm way off right..?

Its ok see here

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

So the deal with media queries are no different from regular CSS. so an easier way to do it would be to just do the normal css first so contact and menu = width 100%. Then just to wrap a media query around it like above. Also see the link for a full guide for the world wide web consortium.

Thank you for the help. It worked.

But Im stuck now at the 3rd and last challenge...

/* Mobile ----------- */ @media screen and (max-width:480px) { .contact, .menu, .cupcake {visibility:hidden} { width: 100%;
} }

I'm kind of unsure where to put the div, inside along with the other elements? I tried placing separately too..

I don't know what the question is askin you but what you posted above is slightly incorrect. visibility: hiiden; and width:100%; should be between the same set of { }

@media screen and (place for size/query) { place for all css relevant to that query }

If this isn't sinking in then I would suggest watching the videos again until it sticks and read the link i posted above, the more you try it the easier it will get.

Thanks

Alright thank you Adam.

You can always tag me on Twitter too if you need help and im not here. its @Sacki2013

I believe I remember this question correctly, and I think this is how it was done :

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

Visibility: hidden might right too though. but you are not trying to hide .contact and .menu, so .cupcake's css needs to be within separate { }s.

Hi Claire,

Thank you for the help, but I'm still stuck on this part.. I have tried using visibility: hidden; or display: none;

but im still having no luck...

I rewatched the videos but the stuff that the girl shows in the video seems to suggest that to his an element you have to use #cupcake {display:none;}

...as to where or exactly how im unsure...

Hey guys,

Ive been on this for weeks now and I just cant get through it...

This is the code that I have typed but Im not going through to the next challenge: Challenge 3 of 3 implementing media queries.

Add the appropriate CSS code to the media query so that images within the ".cupcake" div disappear when the device or browser width is at most 480px wide.

this is my code:

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

it says that the image is still visible even when the device is less than 480px.

Thanks.