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

Jason Mc Dermott
Jason Mc Dermott
11,496 Points
Posted by Jason Mc Dermott
Jason Mc Dermott
11,496 Points

Hi I am having trouble with the nth child bit, I have followed everything so far and can't get it the same, thanks.

When it gets to the formatting of the thumbnails I have followed everything in the tutorial to a 'T' yet still can't get it as demonstrated.

The CSS for this is the following given

#gallery li {

  width:28.3333%;

}

#gallery li:nth-child (4n) {

clear:left; }

Yet when I test this is Google Chrome I still have problems. As I minimize the screen down to tablet size the fourth thumbnail goes in front of the fifth and when I minimize down to smartphone size the third thumbnail drops down on the right and the fourth underneath on the left again and fifth on the right. Also the description underneath the thumbnail for the first is larger than the rest.

I hope this has explained things clearly, I find using nth child a bit tricky as I consider myself only an advanced novice of css. Any help would be appreciated to get past this, thank you.

4 Answers

Benjamin Tortorelli
Benjamin Tortorelli
5,401 Points
Benjamin Tortorelli
Benjamin Tortorelli
5,401 Points

Hi Jason,

Try to remove the space between "child" and "(4n)". It might solve your issue :)

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

In addition to the space, check the teacher's notes below the video for the correct expression to use.

#gallery li:nth-child(3n + 1) {

Jason Mc Dermott
Jason Mc Dermott
11,496 Points
Jason Mc Dermott
Jason Mc Dermott
11,496 Points

That looks to have done the trick, thank you very much

Chris MacDonald
Chris MacDonald
5,166 Points
Chris MacDonald
Chris MacDonald
5,166 Points

I would check that you are using the nth child selector correctly i.e. the number you have in the brackets.

Jason Mc Dermott
Jason Mc Dermott
11,496 Points
Jason Mc Dermott
Jason Mc Dermott
11,496 Points

Thankfully not that drastic getting the correct nth child did the trick, thanks again for the feedback

Jason Mc Dermott
Jason Mc Dermott
11,496 Points
Jason Mc Dermott
Jason Mc Dermott
11,496 Points

After working out the nth child issue I noticed it was still giving me trouble at smartphone size, after pausing for a moment I tried an idea of minimizing the description of the first thumbnail to just one line and it did the trick!, for now I guess. Certainly not the first nth child problem I'll tackle and I doubt it'll be the last ;) thanks again for all the comments