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

General Discussion

Add 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

you 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

Just below image, where it says margin: 2% 0; type max-width:100%; }

Hi Jake, for challenge number 2 try this

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

Hi Jake, for challenge number 2 try this

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

I 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 :) */

lol I'm glad someone else asked this...I'm struggling with it now... I'll try the above recommendations ^_^

Hey 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%;
  }
}

Chris's solution worked for me. Felt a little stupid that I didn't put 2 + 2 together.

Don't feel stupid man. Rome wasn't built in a day. lol

How 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.

add this code above img img { width: 100%; }

just that img { width: 100%; }

as below codes, put it in outside of media

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