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 Adam Overby
Adam Overby
711 Points

Pics aren't resizing..they are staying the original size no matter screen size..please help not sure what to look for.

I could be wrong, but what I think is happening is no matter the screen size my pictures are not resizing, and there is no white border space between them. I have looked at other peoples questions and answers, but most of the answers pertain to their code. Can some one please help Im not exactly sure what Im looking for.

here is my snapshot of work. https://w.trhou.se/vm2jxs5c56

3 Answers

Carl Logan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Carl Logan
Front End Web Development Techdegree Graduate 18,521 Points
Carl Logan
.a{fill-rule:evenodd;}techdegree seal-36
Carl Logan
Front End Web Development Techdegree Graduate 18,521 Points

Okay so the original code for selecting the list should be used which looked like the following:

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

and then the image selector needs to be max-width instead of max-height.

img{
  max-width: 100%;
}
Carl Logan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Carl Logan
Front End Web Development Techdegree Graduate 18,521 Points
Carl Logan
.a{fill-rule:evenodd;}techdegree seal-36
Carl Logan
Front End Web Development Techdegree Graduate 18,521 Points

You are on the right track! Instead of selecting the list elements try selecting the image elements. So your code will look like this:

#gallery img {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}
Adam Overby
Adam Overby
711 Points
Adam Overby
Adam Overby
711 Points

Thanks Carl!! But how come the video uses list? and now that i switched the li to img pics look like they are supposed to be but the text is all wonky now.

Adam Overby
Adam Overby
711 Points

By wonky I mean now my text is trying to float to the right of the image. So the left columns text is now displaying to right instead of below its picture and is above the photos in the right column. And the right column is displaying the text below the left column. I tried all combinations of

gallery img li p a {

}

to resolve this issue with no success. I guess I am confused as to why I am not doing what the video is doing. Isnt that why the video is there to tell me step by step on what to do??