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
Charlie Sattgast
7,205 PointsUnsolved :nth-child problem
:nth-child works like a charm in the examples from this video, but breaks in my project 2 layout from the Tech Degree Front End program in the three-column view.
I did an initial version of the Project 2 with floats for the portfolio items and used :nth-child to clear the floats in the two and three column media queries.
The two column version works perfectly using .portfolio-item:nth-child(2n)
The three column version, however, breaks no matter what I do. The current iteration uses .portfolio-item:nth-child(3n), but it breaks the layout after the first div for some reason I can't understand. I've had two Treehouse mentors look at it and end up scratching their heads. If anyone wants to peek at the project and take a crack at it, here are the links:
Page: https://rawgit.com/cwsattgast/project-2-floats/master/index.html Github repository: https://github.com/cwsattgast/project-2-floats
(I re-did the project with flexbox, completed it, and got an "exceeded expectations." I kept the floats version so I could solve this mystery later. Flexbox was a breeze compared to the :nth-child conundrum!)
Thanks,
Charlie
3 Answers
Seth Kroger
56,414 PointsTry :nth-child(3n+1). It sounds like you want to arrange the items as [1], [2], [3] them break on the fourth (3 + 1), then [4], [5], [6], then break on the seventh (3*2 + 1), etc.
Seth Kroger
56,414 PointsActually, I took a look at you page in DevTools and it should be :nth-child(3n-1) with the way you're breaking the columns. If figured right that it's an off-by-one issue, just not the direction.
Charlie Sattgast
7,205 PointsFor Project 2 all we were given was a set of three png mockups and no code. It was coded from scratch, both html and css. The puzzler is why the two column media query works and the three column doesn't. I thought the :nth-child lesson in the CSS Selectors class would clear up the problem, but it hasn't.
Charlie Sattgast
7,205 PointsSeth, you're a rock star. :nth-child(3n-1) was indeed the solution. Thanks man!
Cindy Lea
Courses Plus Student 6,497 PointsCindy Lea
Courses Plus Student 6,497 PointsI had this same problem. I continued on the path of videos & when they gave us a new workspace after this one, the 3 column worked fine. So I think its in the code they gave us, not something we did.