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

Tim Keegstra
Tim Keegstra
3,627 Points
Posted by Tim Keegstra
Tim Keegstra
3,627 Points

nth-child problem in <480px

When adding the nth-child to responsive.css to fix the odd showing of floating list items for screensizes above 480px, some of the arranging of the under 480px is messed up once you start playing around with the screensize.

Link: http://i58.tinypic.com/2n0k8zr.jpg

1 Answer

Tim Keegstra
Tim Keegstra
3,627 Points
Tim Keegstra
Tim Keegstra
3,627 Points

If anyone had the same problem, the solution is as follows:

To the main.css add: #gallery li:nth-child(2n-1) { clear: left; }

This will make sure that the 1st, 3rd, 5th child and so on, clear left. And not mess up your lay out. However, this code messes up the lay-out in the 480px or bigger layouts. To fix this, add the following code to responsive.css:

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

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Tim,

Nice job figuring that out.

I think it should be pointed out that it isn't the addition of :nth-child for the 3 column layout that causes the 2 column layout below 480px to get messed up. The problem existed from the beginning when the 2 column layout was created. I think that it just happened to work out that the problem wasn't noticed until the 3 column layout was done. So only a fix for that was provided.

nth-child(2n - 1) does work but you will probably more commonly see :nth-child(2n + 1). You could also use the keyword odd for this since you're selecting all the odd children here. :nth-child(odd)

Also, I think that it should be clarified for anyone else having this problem that there are now going to be 2 :nth-child rules in responsive.css and the order matters.

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

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

Because there is overlap between these 2 selectors the one for the 3 column layout needs to come second.