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

Jason Brown
Jason Brown
9,626 Points
Posted by Jason Brown
Jason Brown
9,626 Points

'Undoing' :nth child selectors in media queries. Is this good practice?

I changed the code a little from Nick's to have a single column gallery, then two-column, then three column layout. When I have my two column layout, I have a problem with my third photo jumping around a bit due to the captions as I adjust screen size. I was able to fix this with an :nth child selector and then that caused a second problem with my 6th photo, which I was also able to fix using the same method. When I switch to my three-column layout, the third photo that I had cleared to the left gets pushed to the second row leaving an empty space where it should go on my first row. Also, the 6th photo gets pushed to an unnecessary third row since I had previously floated it to the right. I was able to fix this with yet another :nth child selector in my last media query. But, is this good practice? Doesn't seem to fall in line with the DRY philosophy, or is it ok?

Here's my CSS:

''' @media screen and (min-width: 480px) { #gallery li { width: 45%; margin: 2.5%; }

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

#gallery li:nth-child(6n) { clear: right; } }

@media screen and (min-width: 1024px) { /********************************* THREE COLUMN LAYOUT - GALLERY *********************************/

#gallery li { width: 28.3333%; }

#gallery li:nth-child(3n) { clear: right; } } '''

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Jason,

In this project the list items are floated left. I'm not sure if you changed that but clear: right isn't going to do anything if they're all floated left.

clear: right means that the element needs to be placed below all previous items floated right. But if they're all floated left then it shouldn't have any effect.

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

What you have in your update for the 480px breakpoint looks good.

480px breakpoint -

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

For the 3 column layout, you no longer want the 2n+1 items to be clearing the floats so you have to set the clear property back to none for those items. Then you can have the 3n+1 items clear the floats as mentioned in the teacher's notes for this video.

860px breakpoint -

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

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

You shouldn't need any other nth-child selectors beyond this or clear: right. Were you floating some list items right? All list items should be floated left.

There's different ways this can be marked up but I think a ul is a good way to do it. You have a list of gallery items. I think using divs for the columns or for rows is going to be problematic because the number of columns is changing.

You can also look into flexbox to avoid the floats and nth-child selectors. flexbox has greater support now than it did when this course was made.

I wouldn't worry about "undoing" nth-child selectors in later media queries. This is going to happen with other selectors and properties too. As an example, you might have a certain font-size set for paragraphs on mobile but then you want to override that later to a different size.

In each subsequent media query you're going to be changing previous styles that you no longer want and also adding in new styles that may not have been applicable before.

Jason Brown
Jason Brown
9,626 Points
Jason Brown
Jason Brown
9,626 Points

Thank you SO much, Jason! I knew what I came up with seemed ridiculous. Setting the two column :nth-child(2n+1) {Clear: none;} is exactly what I was after. That was the "undoing" I was speaking of. Also, the :nth-child(3n+1) rule for the 860px breakpoint makes total sense.

I'm new to all of this since September and am actually more comfortable using Flexbox. Since I am so new, I'm trying to become comfortable with using floats as well. But I feel like Flexbox is way more intuitive and am excited this is the way things are moving!

I appreciate your feedback on the other questions as well.

Thanks, again!

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

:point_right: Did you see the correction in the teacher's notes?

It explains that the video presented the wrong selector. Applying the correction to your 2-column layout, instead of using :nth-child(3n), the selector should be :nth-child(2n+1).

Jason Brown
Jason Brown
9,626 Points
Jason Brown
Jason Brown
9,626 Points

Hi guys,

I didn't see the note about the :nth-child(2n+1). Thanks!

I appreciate your previous replies, however I've come across new layout problems (for three-column) once I implemented :nth-child(2n+1) within my two column layout. When I reach my three column breakpoint of 860px, the two column layout isn't budging. I tried use a number of :nth selectors with clear properties with little success. My final solution, and it works, seems a bit convoluted (see below)? Also, to Jason's point, I was trying not to clear anything 'right', but the only thing I found that worked was clearing uncooperative child elements to the right.

note: The three column layout works fine without the :nth-child(2n+1) implemented in the previous media query.

Is building an image gallery from a ul best practice? From my little understanding of layout, wouldn't you have more control of creating div elements with classes or id's for each column and nesting the images within them? I feel like Guil uses that method quite a bit. Or is it an apple or oranges take on layout?

I really appreciate your time in responding to my questions!

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

  #gallery li {
    width: 45%;
    margin: 2.5%;
  }

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

@media screen and (min-width: 860px) {
  /*********************************
  THREE COLUMN LAYOUT - GALLERY
  *********************************/

  #gallery li {
    width: 28.3333%;
  }

   #gallery li:nth-child(3n),
   #gallery li:nth-child(5n),
   #gallery li:nth-child(6n) {
    clear: right;
  }
}