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 trialJun Taoka
1,522 PointsDo 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
2,854 PointsHI, i had the same problem so i changed mine to the 5th and it solved the problem for me.
Thomas MacFarlane
1,234 PointsIs 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
1,522 PointsThanks 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
1,234 PointsYes, 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.