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
Ben Taylor
902 PointsResponsive Grid Question
Hey guys,
I'm making a portfolio site with the grid system used in the course on here. To display the portfolio I'm going to have 3 boxes horizontally, then another 3 under etc etc..
My question is.. On the first grid div you are supposed to put "alpha" in the class and on the last (3rd) you're supposed to put "omega".. however in a loop I don't have that luxury.. is there a way around this?
Many thanks!
Ben
2 Answers
Ben Taylor
902 PointsFor anyone interested, I fixed it with...
$("div#thumbContainer:nth-child(3n+1)").addClass('alpha');
$("div#thumbContainer:nth-child(3n+3)").addClass('omega');
```
Ralf Koller
4,506 Pointshm i haven't done the grid system related courses here on the site as well as i don't know the used grid system but judging from my experiences with other frameworks i guess you dont have to do a loop. working with nth-child for each column would be enough. lets say you have three columns then it might look like that?
li:nth-child(3n+1){
/*the mixin for the first column with alpha*/
}
li:nth-child(3n+2){
/*the mixin for the second column*/
}
li:nth-child(3n+3){
/*the mixin for the third column with omega*/
}
Ben Taylor
902 PointsThanks for the heads up Ralf,
Managed to get it working with:
$("div > :nth-child(3n+1)").addClass('alpha');
$("div > :nth-child(3n+3)").addClass('omega');