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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Posted by lindseyloch
lindseyloch
820 Points

Gallery won't shrink with window

In this lesson I can't get my gallery to shrink. It's 2 columns, so that worked. I've checked numerous times but can"t figure out what isn"t working...I'm sure it's stupidly simple. Any ideas?

3 Answers

Vlatko .
Vlatko .
2,526 Points

I watched part of the video, and I think you may have missed this step:

img {
  max-width: 100%;
}

You need to change the max-width of your images to 100%, otherwise they won't resize as you make your window smaller. Not sure if you have that bit in your code, but double check to make sure it's there.

Also, hit the refresh button on the editor preview after you add that in, the editor wasn't reading the new code until I hit refresh.

P.S. Your gallery code snippets are fine.

lindseyloch
lindseyloch
820 Points

I figured it out - you were close with this comment : ) I used a comma after 100% instead of semi-colon. It's the little things that get me! Thanks for your help!!

Vlatko .
Vlatko .
2,526 Points

No problem and glad you figured it out. The comma/semi-colon issue gets the best of us.

Vlatko .
Vlatko .
2,526 Points
Vlatko .
Vlatko .
2,526 Points

Can you post your code?

It sounds like your width isn't set as a percentage right now.

lindseyloch
lindseyloch
820 Points

Here you go - hope I'm doing this right?

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

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

lindseyloch
lindseyloch
820 Points
lindseyloch
lindseyloch
820 Points

Here you go - hope I'm doing this right?

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

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

Vlatko .
Vlatko .
2,526 Points

Protip: write your code like this to format it (don't include the //).

//````
code
//````