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

Question

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

Answer 1 · 2014-07-26T11:17:38Z

July 26, 2014 11:17am

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.

Answer 2 · 2014-07-27T06:13:54Z

July 27, 2014 6:13am

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.

Welcome to the Treehouse Community

Looking to learn something new?

Brandon Raper

Brandon Raper

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

2 Answers

Lorenzo Pieri

Lorenzo Pieri

Jason Anello

Jason Anello