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
Henry Udefi
Courses Plus Student 664 PointsAdd the appropriate CSS code to the CSS to make images scale with the fluid layout.
Hello Team, am having little issue on Code Challenge: Implementing Media Queries.. I need a help on how to "Add the appropriate CSS code to the CSS to make images scale with the fluid layout." i keep getting it wrong...
12 Answers
jake hazelwood
3,848 Pointsyou need to go back and watch scalable images video its in the group of video's called creating a fluid foundation 00:42 in the video she tells you where to put the code. this is what you need to put into the challenge, in the challenge challenge 1 go to where it says style in the html and underneath it type out this below .img { max-width:100%; }
thats it! click on recheck and you should be able to go onto the next challenge.
hope I have helped you I also am stuck on this same set of challenges on challenge 2 so if you happen to find the answer I would be very happy if you let me know as I have done for you. my email if you do find the answer jakehazelwood1994@hotmail.co.uk skype: yacobm8 number: 07577076662
A Faleye
1,650 PointsJust below image, where it says margin: 2% 0; type max-width:100%; }
A Faleye
1,650 PointsHi Jake, for challenge number 2 try this
@media screen and (max-width : 480px){ .contact, .menu{ width: 100%;} .cupcake img {display: none }
A Faleye
1,650 PointsHi Jake, for challenge number 2 try this
@media screen and (max-width : 480px){ .contact, .menu{ width: 100%;} .cupcake img {display: none }
Chris Puncekar
11,879 PointsI struggled with this one for a while For Challenge #1 it's (at the top) img { margin: 2% 0; max-width: 100%; }
For Challenge #2 & #3 under media q it's (at the bottom): /* Mobile ----------- */ @media screen and (max-width : 480px){ .contact, .menu { width: 100%; } .cupcake img {display: none; } }
/* I hope this helped someone. Treehouse rocks btw :) */
Chris Sicam
4,482 Pointslol I'm glad someone else asked this...I'm struggling with it now... I'll try the above recommendations ^_^
Armando Flores
10,059 PointsHey everyone, I stumbled upon the solution for #2 while looking for help with #1. My solution may not be the most succinct, but it still worked.
.contact {
width: 100%;
}
.menu{
width: 100%;
}
}
Ben Cole
1,189 PointsChris's solution worked for me. Felt a little stupid that I didn't put 2 + 2 together.
Chris Puncekar
11,879 PointsDon't feel stupid man. Rome wasn't built in a day. lol
Stephan Hanna
490 PointsHow do you back out of this course? I can't afford this anymore, as I am unemployed. I have been stuck on this problem for the last 3 weeks and I'm not seeing how I'll be able to continue. This is either not being taught properly or I'm just lacking the aptitude. I have watched the video 10+ times and I'm just not understanding any of it.
branco design
5,120 Pointsadd this code above img img { width: 100%; }
branco design
5,120 Pointsjust that img { width: 100%; }
Yang Bo
Courses Plus Student 8,503 Pointsas below codes, put it in outside of media
img { margin: 2% 0; width: 100%; height:100%; }