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

Marie Veverka
Marie Veverka
12,117 Points
Posted by Marie Veverka
Marie Veverka
12,117 Points

2 column gallery

Hi All! I am really stuck on this lesson. I am trying to create a two column layout like Nick's in the video with some of my own images and it keeps forcing some of the images onto the next line. Currently, I have 1 line with 2 images side by side like I want, and then the next line will have 1 image, and then a few lines with 2 images, and then another line with 1 image again. Any ideas where I might be going wrong? Thanks!

In my general section, I have the image width selector like in the video:

img {
  max-width: 100%;
}

And then for this gallery, I have:

#gallery_plexi {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery_plexi li {
  float: left;
  width: 45%;
  margin: 2.5%;
  text-align: center;
  color: #bdc3c7;
}

#gallery_plexi li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #777;
}

3 Answers

Marie Veverka
Marie Veverka
12,117 Points
Marie Veverka
Marie Veverka
12,117 Points

Just in case anyone else runs into this problem, you can fix it by using the nth child pseudo class! So, in my gallery I needed to use:

gallery_plexi li:nth child(3n) {

clear: left; }

If clear left doesn't work, try clear right as well. For some problem images I needed to use left, and others I needed to use right. Yay!

Henry Goh
Henry Goh
20,201 Points
Henry Goh
Henry Goh
20,201 Points

Hi Marie, I checked through your CSS and it works fine. It'd be better if you could upload your HTML file as well as I think the issue could come from the HTML file. Probably a missing close bracket etc. Those kind of small syntax errors.

Best regards.

Marie Veverka
Marie Veverka
12,117 Points
Marie Veverka
Marie Veverka
12,117 Points

HI Henry, Thanks for the reply. I used the nth child pseudo class on the problem images and all seems to be working now. Thanks though!