3 Column layout nth clear not working

Hi Tamsin,

In the video which covered :nth-child(4n) there should be a code correction in the Teacher's Notes section telling you to change it to :nth-child(3n + 1)

4n doesn't correctly select the first item in every row.

So changing the expression to 3n + 1 should get it working properly on 3 column layout.

You need to add another :nth-child expression for the 2 column layout for that to work properly.

main.css is where the 2 column layout is setup and each gallery item has a width of 45% This is where you want to add the other :nth-child expression.

main.css around line 118:

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

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

So add the second rule there and that will clear the float on every odd item which is fine for a two column layout. You always want to clear the float on the first item of every row. So in a two column layout that would be the 1st, 3rd, 5th, ... or every odd item.

Because of this we have to do a little more in responsive.css. Once the media query takes effect and we go into 3 column layout we have a new :nth-child expression for that. 3n + 1 but the old :nth-child expression odd is still taking effect. We don't want the odd items to be clearing the floats anymore so we have to remove the clear: left first before using 3n + 1

Updated responsive.css:

#gallery li {
    width: 28.3333%;
  }

  #gallery li:nth-child(odd) {
  clear: none;
  }

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