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
Jason Mc Dermott
11,496 PointsHi 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
5,401 PointsHi Jason,
Try to remove the space between "child" and "(4n)". It might solve your issue :)
Chris MacDonald
5,166 PointsI would check that you are using the nth child selector correctly i.e. the number you have in the brackets.
Jason Mc Dermott
11,496 Pointsappreciate the feed back
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 PointsAre you only having problems in Chrome? Can you also post your HTML code fore review?
Jason Mc Dermott
11,496 PointsThankfully not that drastic getting the correct nth child did the trick, thanks again for the feedback
Jason Mc Dermott
11,496 PointsAfter 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
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsIn 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
11,496 PointsJason Mc Dermott
11,496 PointsThat looks to have done the trick, thank you very much
Benjamin Tortorelli
5,401 PointsBenjamin Tortorelli
5,401 PointsGlad it worked Jason!