Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Stuck. nth-child fixed the 3-column layout, but 2-column one has the same issue.

https://w.trhou.se/fd0l19qx3t

Above is my code.. I really apologize, as I've started a few other discussions, but still havent received the answer i need. Probably my fault, as I may have asked the questions incorrectly.

I followed the instructions exactly. Three-column layout is perfect, but my 2-column layout has the same issue where, as the text in my first list item in the gallery takes up 3 lines, the 3rd item in the gallery doesn't clear. Can I just add another nth-child to main.css? I tried this in a previous post, but then my 3-column layout got all wonky.

OR... should I just not worry about it, as it is a minor issue that doesn't really have to be fixed?

1 Answer

Yes, you could add the following to main.css:

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

And then to responsive, in the media query for 3 columns:

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

But then technically you'd need to add it for every other media query where you adjust the number of items in a row. An alternative, though not technically 'mobile-first' in its approach, would be to add the first rule I described to its own media query, but with a max-width of 479px:

responsive.css
@media screen and (max-width: 479px) {
  #gallery li:nth-child(2n+1) {
    clear: left;
  }
}

Thanks so much! Exactly what i needed to know :)