Gallery two column layout not aligning properly

Hi Ellen,

I think the problem you're having is related to the problem that Nick shows in the video around 8:40.

When the 2nd item caption wraps to 3 lines it extends down lower and effectively prevents the 4th item from floating all the way to the left.

In your case, it's not the captions but the height of the images differ. Your images are not the same native size.

When "The Gift" and "The Song" are scaled to the same width, The Gift image ends up being about 0.1px taller than The Song. It's too small a difference to see by looking at it but if you use your browser's developer tools you'll be able to see that the computed heights of the images differ by about 1/10 of a pixel.

This has the same effect as if the caption wrapped to another line. It blocks your 5th image, Little Red, from floating all the way to the left.

You can employ a similar nth-child solution for the 2-column layout as was done for the 3 column layout to fix the problem.

In main.css add: (expression is changed to 2n + 1 for 2 columns)

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

This is still going to be applied when you reach the media query and it's going to mess up the 3 column layout. So you have to first select the 2n + 1 items and set the clear property back to none so that those items are no longer clearing the floats then you can set the 3n + 1 items to clear the floats.

In responsive.css

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

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

Let me know if you're still having problems.