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

Malwina Pukaluk
Malwina Pukaluk
1,624 Points
Posted by Malwina Pukaluk
Malwina Pukaluk
1,624 Points

problem with an nth-pseudo class selector in 3 column gallery layout

During the challenge, I succeeded to adjust the position of "jumping" and unevenly displayed images to 3 column layout using the nth-child pseudo selector, however in my workspace document things don´t look that good and I still have the same issue. I am not sure what am I doing wrong here?

@media screen and (min-width: 480px) {
    /************************
     TWO COLUMN LAYOUT
    **************************/
  #primary{
  width:50%;
    float:left;
  }

#secondary {
  width: 40%;
    float:right;
  }

   /************************
     3 X 5 =15 (MARGIN) (2.5 + 2.5 MARGIN ON EACH SIDE = 5%)
     100% - 15% = 85%
     85 / 3 = 28.333333333333
    **************************/

   /************************
     PAGE: PORTFOLIO
    **************************/

@media screen and (min-width: 480px) {
  #gallery li {
  width: 28.3333%;
}

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

/************************
     PAGE:ABOUT    
 **************************/

.profile-photo {
  float: left;
  margin: 0 5% 80px 0;
}

}


  ...
Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

We can take a look if you make a snapshot of your workspace and post the link to it here.

Malwina Pukaluk
Malwina Pukaluk
1,624 Points
Malwina Pukaluk
Malwina Pukaluk
1,624 Points

The above code is the css code from my workspace

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

The CSS alone isn't enough to observe the issue. But a snapshot of your workspace would share all the code at once.

Malwina Pukaluk
Malwina Pukaluk
1,624 Points
Malwina Pukaluk
Malwina Pukaluk
1,624 Points

Thank you for the tip. Here is the snapshot: I was talking about responsive.css file in the css folder https://w.trhou.se/a044pm4eyn

3 Answers

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

I didn't see any problems with 3-column mode with only 5 items, but you would probably see odd behavior if you add a few more. To fix that, replace "4n" with "3n+1" in the nth-child selector for 3 columns (line 32).

There also appears to be an incomplete block which can be closed by adding an ending brace ("}") around line 14.

And as I narrowed the screen, the 2-column mode was a bit twitchy. I smoothed that by adding this to the top of "responsive.css":

@media screen and (max-width: 479px) {
  #gallery li:nth-child(2n+1) {
    clear: left;
  }
}
Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

Good attitude! :+1: The number before "n" is the repeat interval, and the number after "+" is the index to begin counting on. So the items affected by those 2 settings would be like this:

  • nth-child(4n) :point_right: 4, 8, 12, 16 ...
  • nth-child(3n+1: :point_right: 4, 7, 10, 13 ...

For more information, see the MDN page on nth-child.

Glad I could help, and happy coding!

Malwina Pukaluk
Malwina Pukaluk
1,624 Points
Malwina Pukaluk
Malwina Pukaluk
1,624 Points

Thank You, Steven! It worked. Your tips helped me to solve this issue :) In the nth-child selector, what does "2n+1 "stand for? Does this "+" sign mean that I want to clear the 2nd plus the 1st item? I want to understand well what I am doing so that I am not just bluntly copying this part of the code.