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

CSS How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Ornilo Santiago
Ornilo Santiago
6,773 Points
Posted by Ornilo Santiago
Ornilo Santiago
6,773 Points

nth-child for two columns

How can I make two columns work properly with "clear: left" like three columns from the example? MY CODE: @media screen and (min-width: 480px and max-width: 659px) { #gallery li { width: 45% }

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

FYI: I added more text on the 3rd list from my portfolio to see if it would work but got the same problem jumping the line and left space on the left side.

Aneta Molenda
Aneta Molenda
2,004 Points

I have the same problem. When I resize and get a two-column layout, there is an empty space on the left side. Looking for an answer!

3 Answers

Jinson Abraham
Jinson Abraham
1,700 Points
Jinson Abraham
Jinson Abraham
1,700 Points

For 2 columns you could use the :nth-child(odd) and :nth-child(even) property.

Ornilo Santiago
Ornilo Santiago
6,773 Points
Ornilo Santiago
Ornilo Santiago
6,773 Points

Hi Jinson, Thank you for your feedback but I didn't have success with the changes. If you want to take a look on the page just go to this link: http://port-80-gzwd0rag54.treehouse-app.com/ and reduce the size of screen to two columns to see my issue

Jinson Abraham
Jinson Abraham
1,700 Points
Jinson Abraham
Jinson Abraham
1,700 Points

Hi, Your link is returning an error.

Tomáš Grygerek
Tomáš Grygerek
5,694 Points
Tomáš Grygerek
Tomáš Grygerek
5,694 Points

Hi, problem is in :nth-child(3n) 3n: this is 3. element, but than 6. instead of 5.

Right syntax is :nth-child(2n+1)

Its easy.. In video instruktor made mistake, because in example, we need clear every third element, not every forth. And constant after mulltiplier allows us to decice where to begin.

When you want clear every second element, you cannot use 3n, but 2n (+1 if needed).

I hope this will help you :)