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 Kareem Osman
Kareem Osman
Courses Plus Student 430 Points

Styling Portfolio: (#gallery li) Trouble getting images to respond to the code.

I'm having some trouble when resizing my browser, after saving and refreshing my CSS #gallery li {} code.

gallery li {

 float: left;
 width: 45%;
 margin: 2.5%;
 background-color: #f5f5f5;
 color: #bdc3c7;

}

That is the code in the lesson, and Nick's webpage (which is minimized to mimic the mobile version of the site) seems to resize all of the jpg images in the browser, due to the "float" and width and margin. My webpage just glued my images together but did not resize my gallery list images. Any ideas?

Thank You

1 Answer

Liz Laffitte
Liz Laffitte
23,691 Points

Kareem,

For that lesson, I also have this code that affects the images:

img{
  max-width: 100%;
}

Try adding that and see if that's the issue. It will make sure that the images' width can't be more than 100% of their parent element's.

Kareem Osman
Kareem Osman
Courses Plus Student 430 Points

Wow! Thanks Elizabeth. I added it in my "Page Portfolio" section right under my #gallery li and it resized them. This might be a beginner question, but why was that not included in the lesson, and it seemed to work fine for the instructor without it? I guess, I need to practice more on trouble shooting within measurements. I appreciate the help, thank you.

Also, after applying the bit of code you just gave me, it no longer centers my footer and Facebook logo. Any ways to fix this?

Liz Laffitte
Liz Laffitte
23,691 Points

Kareem,

No problem! I don't remember if that was included when I took it or if it's a fix I found. Sorry! If it's affecting other parts of your code negatively, you can always make it more specific so that it only applies to your gallery images:

#gallery li img{
  max-width: 100%;
}