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

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

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.

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!!

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

Can you post your code?

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

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

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

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

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