CODEWITHSUNDEEP
htmlcsslistcss-selectorshtml-lists
Anthony
Anthony

Reputation: 43

Listed images are being moved down a line, when the exact same code does not move them down elsewhere

I want to display a gallery of images, in a grid format, and this works up until the 8th item. I am using the nth-child selector on the list element to move the 4th list item, however trying it on further items doesn't seem to move them.

Any help is welcome; I hope I have formatted this new question well. I found it hard to word and thus hard to search for.

I am using 9 of the following list items:

      <li>
        <a href="img/livingroom.jpg">
        <img src="img/livingroom.jpg" alt="">
        <p>The apartment has two bedrooms and an open living/dining room with kitchen.</p>
        </a>
      </li>

Below is the CSS affecting them:

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

#gallery li {
    float:left;
    width:45%;
    margin: 2.5%;
    background-color: #f5f5f5;
}

#gallery li a p {
    margin:0;
    padding: 5%;
    font-size: 0.9em;
    color:#999;
    font-family: 'Source Sans Pro', sans-serif;
}

#gallery li p {
    margin:0;
    padding: 5%;
    font-size: 0.9em;
    color:#999;
    font-family: 'Source Sans Pro', sans-serif;
}

And the nth-child code is listed under my responsive code for 480px:

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

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

Below are images showing what happens with this code:

Upvotes: 0

Views: 33

Answers (1)

Marc Audet
Marc Audet

Reputation: 46795

I am guessing that you want two rows of four images and a single image on the third row.

You are pretty close with the nth-child selector, try the following.

You want to clear the 1st, 5th and 9th images, so use 4n+1.

Using 4n clears the 0th, 4th and 8th images, probably not what you want.

If you want 2 images per row, use 2n+1, and for 3 images per row, 3n+1.

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  padding: 10px;
  float: left;
  border: 1px dotted blue;
}
li img {
  vertical-align: top;
}
li:nth-child(4n+1) {
  clear: left;
}
<ul>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
</ul>

Upvotes: 2

Related Questions