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

CSS

Posted by Matthew Bymaster
Matthew Bymaster
5,052 Points

Unable to answer: Build a Responsive Website->Adaptive Design->Implementing Media Queries->Challenge task 1 of 3

The task: "Add the appropriate CSS code to the CSS to make images scale with the fluid layout." I have a feeling this is a very simple answer and I'm probably not understanding what is truly being asked here. What is the answer to this? I really wish there was a button to show you the answer so I could smack myself in the forehead and say, "duh".

4 Answers

Keith Trice
Keith Trice
6,301 Points
Keith Trice
Keith Trice
6,301 Points

The wording of the question is a little bit misleading. It's actually not asking for the image to be set to scale within the breakpoint styling, but instead for the image to scale as part of the overall fluid layout. To set this, you can add max-width: 100% under the main img element selector on line 13 of the CSS. You should end up with this.

img {
  margin: 2% 0;
  max-width: 100%;
}
Matthew Bymaster
Matthew Bymaster
5,052 Points
Matthew Bymaster
Matthew Bymaster
5,052 Points

I was thinking:

@media screen and (max-width : 480px) {
      #cupcake img {
      max-width: 100%;
      }
     }

but that doesn't work

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

i think you are most of the way there, try moving your : so there is no white space after max-width @media screen and (max-width: 480px)

also you don't want max-width when you want your image to scale to 100% you just want width: You may want to rethink the # in front of cupcake too give it ago,

Matthew Bymaster
Matthew Bymaster
5,052 Points

The below code seems to work when you "preview" the site and play with the window size BUT is not being accepted by the Team Treehouse system. I've finished everything on that project except for that set of questions and it's holding me up from moving on.

Matthew Bymaster
Matthew Bymaster
5,052 Points
Matthew Bymaster
Matthew Bymaster
5,052 Points

I went through the rest of the project and am now coming back to this question as I'm stumped. I took your suggestion and have tinkered with the question. If I use this code:

@media screen and (max-width: 480px) {
#container img {
width: 100%;
}
}

It actually works in the PREVIEW mode for the question BUT the Treehouse automated answer still comes back as incorrect: Bummer! The image isn't scaling with the browser. How could you set the width of the image so that it's fluid?