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 J V
J V
4,471 Points

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

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

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;
  }
}
J V
J V
4,471 Points

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