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

Jun Taoka
Jun Taoka
1,522 Points
Posted by Jun Taoka
Jun Taoka
1,522 Points

Do you need to clear the 3rd item when reducing size to 2column grid?

In the video we learn to clear the 4th item in the grid and align it to the left - this functions correctly in my case.

However, when my window width is reduced to a 2 column grid, my 3rd item does not clear and drop to the left as it does automatically in Nick's video. Should this happen automatically or will I need to add to the CSS for every 3rd item?

3 Answers

George Titterton
George Titterton
2,854 Points
George Titterton
George Titterton
2,854 Points

HI, i had the same problem so i changed mine to the 5th and it solved the problem for me.

Thomas MacFarlane
Thomas MacFarlane
1,234 Points
Thomas MacFarlane
Thomas MacFarlane
1,234 Points

Is your third image dropping to the next line but not clearing, or not dropping at all?

If it's the former, you haven't set your clear and containers padding and margin correctly for the two column layout.

However if it drops but doesn't clear the 1st element, this is probably because the 1st element has a caption too large that the 3rd item isn't able to clear it.

This needs to be added to the Code Correction in the teacher's notes:

Add the following to main.css:

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

And in responsive.css in the 3 column layout add:

#gallery li:nth-child(2n + 1) {
  clear: initial;
}
Jun Taoka
Jun Taoka
1,522 Points
Jun Taoka
Jun Taoka
1,522 Points

Thanks George and Thomas for your feedback. Appreciate your time.

George - with your comment I found my 5th gallery item would drop regardless of screen size, so this wasn't the right option.

Thomas - This helped for dropping every 3rd item but didn't isolate this to the 3 column grid. Instead this was over-riding the 4 column grid. So I implemented a new media query in my responsive.css to isolate this code to the smallest screen size, which has done the trick:

@media screen and (max-width: 480px) {

gallery li:nth-child(2n+1) {

clear: left; } }

Hope that helps for anyone else who ran into the same problem

Thomas MacFarlane
Thomas MacFarlane
1,234 Points
Thomas MacFarlane
Thomas MacFarlane
1,234 Points

Yes, that is the same as what I suggested. However the way I suggested it was to include that code in the css in main.css, and by resetting the value back to initial in the media queries for larger screens, this correctly follows the idea of a mobile-first approach.