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 trialHenry Udefi
Courses Plus Student 664 Pointsfluid 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
10,322 PointsHello 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.
Henry Udefi
Courses Plus Student 664 Points/* Mobile ----------- */ @media screen and (max-width : 480px) {
}
Nikolaos Papathanassopoulos
10,322 PointsPlease 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.
Henry Udefi
Courses Plus Student 664 PointsHello 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
10,322 PointsHello 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.
Henry Udefi
Courses Plus Student 664 PointsThanks 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%;
}
Henry Udefi
Courses Plus Student 664 PointsHello 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; }
}