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 Thomas Anderson
Thomas Anderson
1,474 Points

li:nth-child(4n+1) stops working after 9th item

I have been using Nth-Child for a gallery on a desktop screen size but it breaks down after the 9th item. When in preview mode, I have two complete rows of four but the third row only has 1 item on the left and the fourth row as 3 items but all to the left.

Any suggestions or recommendations would be greatly appreciated!

Here is the html

<ul id="answer-gallery">
              <li>
                <img src="../img/Tremon.jpg" alt="Trill and Lemon's adventure." class="answer" >
              </li>
              <li>
                <img src="../img/Tremon.jpg" alt="Trill and Lemon's adventure." class="answer" >
              </li>>
              <li>
                <img src="../img/Tremon.jpg" alt="Trill and Lemon's adventure." class="answer" >
              </li>
              <li>
                <img src="../img/Tremon.jpg" alt="Trill and Lemon's adventure." class="answer" >
              </li>
              <li>
                <img src="../img/Tremon.jpg" alt="Trill and Lemon's adventure." class="answer" >
              </li>
              <li>
                <img src="../img/Tremon.jpg" alt="Trill and Lemon's adventure." class="answer" >
              </li>
              <li>
                <img src="../img/Tremon.jpg" alt="Trill and Lemon's adventure." class="answer" >
              </li>
              <li>
                <img src="../img/Tremon.jpg" alt="Trill and Lemon's adventure." class="answer" >
              </li>
              <li>
                <img src="../img/Tremon.jpg" alt="Trill and Lemon's adventure." class="answer" >
              </li>
              <li>
                <img src="../img/Tremon.jpg" alt="Trill and Lemon's adventure." class="answer" >
              </li>
              <li>
                <img src="../img/Tremon.jpg" alt="Trill and Lemon's adventure." class="answer" >
              </li>
              <li>
                <img src="../img/Tremon.jpg" alt="Trill and Lemon's adventure." class="answer" >
              </li>
            </ul>

Here is all the CSS that is affecting the class and id.

/***Main CSS***/

.answer {
  display: block;
  max-width: 28.33333;
  margin: 0 auto 0;
  border-radius: 20px; 
  }

#answer-gallery li {
  list-style-type: none;
   float: left;
   width: 45%;
   margin: 2.5%;
   color: #bdc3c7;
  }

/**Responsice CSS - @media screen and (min-width: 480px)***/

 #answer-gallery li{
    display:inline;
    float: left;
    max-width: 22.5%;
    margin: 5px 5px 5px 5px;
  }

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

#answer-gallery ul li {
      max-width: 22.5%;
      margin: 5% 5% 0 5%;
      display:inline;
      background-color: #fff;
    }

2 Answers

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I think your math is off on the margins. You have 22.5% size of picture and a total of 10% margin between the pictures. 5(right) + 22.5 + 10 + 22.5 + 10 +22.5 +10 +22.5 + 5 = 130%

That causes all sorts of problems. Some of your pics are wrapping, so I think you see the breakdown after the 9th pic.

Thomas Anderson
Thomas Anderson
1,474 Points

Good catch. I corrected the size to 20% and the margins to 2.5% but I'm still running into the same error.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Clear: left makes it so that nothing can be to the left of the 4th, 8th, 12th, etc item. I am not sure why you are using it. I would do it like this:

#answer-gallery ul li {
  margin-right: 2.5%;
  width: 22.5%;
  display: inline;
}

#answer-gallery ul li:nth-child(4n+1) {
  margin-right: 0;
}

You put your nth selector before the main. If the main CSS for that element is at all contradictory, the later code wins.