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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Afro Gypsy
Afro Gypsy
1,687 Points
Posted by Afro Gypsy
Afro Gypsy
1,687 Points

Why are some of my images still skipping when i shrink the window?

I wrote the code almost exactly as the teacher the only difference is I added one more photo than teacher, making the images total to 6 instead of 5. I understand the caption is wrapping around but i thought adding the nth:child(4n) would clear that? my code is below. Thanks in advance for the help.

/********************************* PAGE PORTFOLIO *********************************/

#gallery li { width: 28.3333%; }

#gallery li:nth-child(4n) { clear: left; }

5 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Are you seeing the skipping when it's a two column layout?

The problem that happens in the video with the 3 column layout is also a problem for the 2 column layout. However, the videos to my knowledge never show the fix for the 2 column layout.

You need to use a different :nth-child expression for the 2 column layout.

In the portfolio section of main.css you need to add the :nth-child rule:

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

#gallery li:nth-child(2n + 1) {
    clear: left;
}

In responsive.css we have to first remove the clear property we set for :nth-child(2n + 1) then we can set clear: left on :nth-child(3n + 1)

#gallery li {
    width: 28.3333%;
  }

#gallery li:nth-child(2n + 1) {
    clear: none;
}

#gallery li:nth-child(3n + 1) {
    clear: left;
}

See if that helps.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Afro Gypsy,

The Teacher's Notes below the video contain a correction for the :nth-child expression. It should be :nth-child(3n + 1) for a 3 column layout.

Afro Gypsy
Afro Gypsy
1,687 Points
Afro Gypsy
Afro Gypsy
1,687 Points

Thanks Jason, but for some reason it is still skipping.

Afro Gypsy
Afro Gypsy
1,687 Points
Afro Gypsy
Afro Gypsy
1,687 Points

Thank you I will try that Jason

Afro Gypsy
Afro Gypsy
1,687 Points
Afro Gypsy
Afro Gypsy
1,687 Points

Thanks jason, That worked!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.