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

Design

fluid image question

Hello TeamTreehouse, am having little issue on Code Challenge: Implementing Media Queries.. I need some help on how to "Add the appropriate CSS code to the CSS to make images scale with the fluid layout." am really finding it hard to solve this code challenge..

Thanks Guys!!

7 Answers

Nikolaos Papathanassopoulos
Nikolaos Papathanassopoulos
10,322 Points

Hello Henry! It would be useful if you add a hyperlink to the challenge. Also: show us what you tried so far.

tip: it has something to do with

img{
width: ??? ?;
}

~ Nikos.

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

}
Nikolaos Papathanassopoulos
Nikolaos Papathanassopoulos
10,322 Points

Please Edit your post. This is not helpful at all. Just include the css concerning the question.

to make the images scale you need to use the img selector in css:

img{
    property: value%;
}

and assign its "width"-property a value of "100%"

Does that help?

~ Nikos.

Hello Nikos, thanks for your time, i just edit my post... above the place where i believe i will have to Add the appropriate CSS code to the CSS to make images scale with the fluid layout"

i have tried what Alice taught by adding grid_ to it. but still not getting it . eg;

/* 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%;} }

Nikolaos Papathanassopoulos
Nikolaos Papathanassopoulos
10,322 Points

Hello Henry, good news: the solution is way easier than you think ;) i just redid the challenge:

the challenge DID NOT ask you to add code to a media query. the challenge DID ask you to add

img{
width: 100%;
}

to the css in between the <style> tags.

~ Nikos.

PS: Rewatch some videos before this Challenge, maybe it'll help you understand the difference.

Thanks Nikos, yeah it helped, I got it...".i had to re watch Creating Fluid Foundation", that's where she explained it better....

img {
  max-width: 100%;
}

Hello Nick, I got held up at the last Question... "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."

/* Mobile ----------- */ @media screen and (max-width : 480px) { .menu { width: 100%; margin: 0 0 2% 0; float: left; } .contact { width: 100%; margin: 5% 0; padding: 3%; float: right; background-color: #2e0400; border-radius: 15px; } .cupcake { border-bottom: 1px dotted #FAF3BC; padding: 5% 0; }

}