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

CSS

Posted by Vaughn Ava
Vaughn Ava
590 Points

added an image to gallery in "how to build a website" and having trouble with nth child/responsiveness

I added a sixth image to my gallery and now 4n for the nth-child bit is messing out how the images are distributed. I tried changing it to 2n, 3n, and 6n and none of those fixed the ugly format. how do I make each line have two images when the window is shrunk to mobile size? snapshot here: https://w.trhou.se/fwvio3cd6h

gregory gordon
.a{fill-rule:evenodd;}techdegree
gregory gordon
Full Stack JavaScript Techdegree Student 14,652 Points

did you try useing (2n+2)

1 Answer

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

So this design is coded in a 'mobile-first' style. That is, the default CSS applies to the smallest screen sizes, and then changes (or responds) to anything larger.

What that means here is that you actually need to add your CSS rules to your main.css file.

This should do it (placed under the #gallery li rule in main.css):

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

You'll then also need to reset/counteract that rule in your responsive.css and add another to get 3 images per row (I assume that's your intention), again, under the #gallery li rule:

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

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

It can be a bit confusing that there is a reference to a 'two-column' and 'three-column' layout in responsive.css, but that's actually meant to refer to the overall page layout, not the #gallery.

Here's a snapshot of your code with my edits.