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

Posted by Brandon Raper
Brandon Raper
5,360 Points

Responsive design: Three column layout: nth-child(3n+1) et al.

I have noticed that the problem described in the video and subsequent code correction doesn't completely address the layout oddity when resizing. I say this because I did not create the same text for each image as stated in an early video.

Since the text wraps and expands the container, you can get this phenomenon on (2n +1) ... and possibly others given number of items and length of text in the paragraph for the gallery list items.

Is there a better way to address the gallery containers and how they re-size?

Here is the index in case that is useful.

http://web-dpf8m30zn2.treehouse-app.com/index.html

Here is a link to a screencap if the html should change as I continue through the module.

http://imgur.com/3QfrsEE

2 Answers

Lorenzo Pieri
Lorenzo Pieri
19,772 Points
Lorenzo Pieri
Lorenzo Pieri
19,772 Points

Well, if this problem comes in when you are at MOBILE screen sizes (or similar), I would advise you to use the display: block property. It would send anyone on the new line, avoiding you the problem.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Brandon,

You're correct. This problem also happens in the two column layout and so you need :nth-child(2n + 1) for that. This will select the odd numbered items or 1, 3, 5, 7, 9... so you can use the keyword odd as well.

In main.css you can add:

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

This takes care of the mobile 2 column layout.

For the 3 column layout you have the corrected nth-child expression but since you have the earlier one for mobile you first have to remove the clear property from the odd items before you set it on the correct ones for 3 column.

In responsive.css:

#gallery li:nth-child(2n + 1) {
    clear: none; /* set the clear property back to none for the odd items because this will mess up the 3 column layout */
}

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

Let me know if you have any questions about it.