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

Will Albertsen
Will Albertsen
3,872 Points

Problem with fitting columns to mobile devices

I'm working on the "Front-end Web Development" track and we've gotten to the point where we are organizing our photo gallery into two columns to fit a mobile device. In the training video, Nick minimizes his window as far as it will go and the pictures fit nicely (there are two pictures in the first two rows and one picture in the third row. When I try it, I almost get my window completely minimized, however, right at the last moment, the "number 6" image in the second row gets pushed to the right, forcing the "number 9" image down to the third row. So now, I have two images in the first row, one in the second, and two in the third. I noticed that the gray text area under the "number 1" image is longer than other ones. I'm using all of the same measurements that Nick is using (at least I think after double and triple checking). What could be causing this to happen? Thank you.

Will Albertsen
Will Albertsen
3,872 Points

Problem solved. Somehow I missed the following code:

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; }