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

Pramodini Kurnala
Pramodini Kurnala
4,875 Points
Posted by Pramodini Kurnala
Pramodini Kurnala
4,875 Points

The 3 column layout works fine for 5 images. But its not working fine when i add a total of 9 images

I applied the condition of nth-child(4n). But the image in 8th position i.e(3rd row - 2nd image) is pushed away again. And the layout is disturbed again. What can i do, to make this layout properly.

2 Answers

James Shi
James Shi
8,942 Points
James Shi
James Shi
8,942 Points

There's a mistake in this video. The solution is to replace "4n" with "3n+1". In the video, you happen to only need to clear the 4th image, but you actually want to clear the 4th, 7th, 10th, etc. images (if you have that many), so that sequence is satisfied by 3n+1.

Pramodini Kurnala
Pramodini Kurnala
4,875 Points
Pramodini Kurnala
Pramodini Kurnala
4,875 Points

Thanks, the problem is resolved now.

Maxime Borreda
Maxime Borreda
9,088 Points
Maxime Borreda
Maxime Borreda
9,088 Points

Yes I got the same problem. I have 16 images in my gallery. The first two rows are working fine. Then, on the third row, only one image appears and on the fourth 3 images again, fifth row got 1 image then sixth got 3 and so on... What can we do to fix it?