Responsive web design issue.

Hi Carson,

I think part of the confusion here is that the solution in the video for this problem :nth-child(4n) was specifically for the 3 column layout. This doesn't kick in until you're at 480px or above. Since your screenshot shows the 2 column layout your browser width must have been below 480px when taking that screenshot. As you've discovered, the problem exists for the 2 column layout as well but requires a different :nth-child expression.

Also, you should take a look at the Teacher's Notes for this video. 4n was not the correct expression for 3 column layout. 3n+1 is correct.

The problem is that we have variable height items due to the captions. Some will be longer and wrap to more lines making those list items extend down farther. Since the 3rd item doesn't have enough room on the first row it is pushed down just enough until it can fit. So it's pushed down below the 2nd item so that it can slide left but it stops when it hits that 1st item which extends down lower. Since that 3rd image now fits inside the container it stays right there. Floated items are only pushed down the minimum needed to fit inside the container.

Now the 4th item can't fit in the second row so it is pushed down below the 3rd image and then since there's nothing else in its way it is able to slide all the way to the left, and so on with the 5th, etc....

By having this 3rd item clear the float, we're saying that it needs to drop below all previously floated items. So this 3rd item will be pushed down below both the 1st and 2nd image which allows it to slide all the way to the left.

So we need to clear the float on the first item of every row. In a two column layout this would be the 1st, 3rd, 5th, 7th,... or every odd item.

The correct expression would be :nth-child(2n+1) or use the keyword "odd" :nth-child(odd) Both of these are equivalent. Again, this is specifically for the two column layout at smaller widths and should go in main.css

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;
}

In responsive.css:

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

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

In the 3 column layout we don't want the odd items to clear the float anymore so we have to remove that clear on the odd items then we can set the correct items to be cleared for the 3 column layout. The first item in every row for 3 columns would be 1st, 4th, 7th, and so on. 3n + 1 is the correct expression to select those.

I hope that clears it up for you.