How to Make a Website - Build a Three Column Layout.

Tagging Nick Pettit on this one.

I applied the code that you gave and it worked in the three column view of the site, but when the page was resized below 480px the two columns were not aligning correctly.

I resolved it by adding another media query, based on the nth-child example you provided, for the smaller viewport.

@media screen and (max-width: 479px) {
  /**********************************
 PAGE: PORTFOLIO
  ***********************************/
    #gallery li:nth-child(2n+1) {
    clear: left;
  }
}

The gallery appears to display correctly now in both the smaller and larger viewports.

Not sure how bulletproof this would be if I started changing image sizes and caption lengths though.

Oops! You're absolutely right! Sorry about that mistake, and thank you so much for pointing it out.

I've added a correction to the teacher notes section of the video with a detailed explanation. Here's the link!

David Bilson Yes, that should be fine for the smaller viewport. I wanted to address your concern about whether this would be bulletproof. I'm reluctant to make that claim but I think that it would be.

I haven't been through this project but it looks like the gallery will only ever be 2 or 3 columns. So you have 2 possible layouts and so you would need 2 :nth-child() selectors. As long as you are controlling the number of columns and you have the correct nth-child expression at the proper breakpoints where the number of columns change then it should always work.

Try adding an unusually large amount of text to the second image in the first row. Something unreasonable like 20 lines of text I think you'll find that the second row still lines up correctly. The 1st and 3rd image in the first row is going to have a lot of space below it but the layout won't break.

Not sure what you mean by changing image sizes though. Technically these images are changing size because they're fluid. Or do you mean, what if the images aren't a uniform width?

Also, in case you didn't know this you can also pass in odd or even as arguments to :nth-child().

So :nth-child(2n+1) is equivalent to :nth-child(odd) and :nth-child(2n) is equivalent to :nth-child(even)

Nick Pettit sorry to bother you but we may need another update to the Teacher's Notes for the two column layout.

Jason Anello,

I looked again, but unless I'm missing something, the two column version should be working properly with the updated code. If I'm wrong, can you be more specific about what would need to change?

Hi Nick Pettit ,

I think that :nth-child(3n+1) is only fixing it for the 3 column layout, 480px and up. As David Bilson mentioned in the comment above, we still have the float hanging problem on the two column layout for under 480px. So I think we need another :nth-child for that layout.

David used a media query to solve the problem but now I realize that if this was a mobile first approach it might be better to add :nth-child(odd) to main. css

Something like: (in 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;
  }

I realize this brings up a new problem though. When we get to above 480px and the :nth-child(3n+1) kicks in, we still have all the odd list items with a clear: left and we would have to remove that.

In responsive.css:

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

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

So perhaps David's mobile media query is the easier solution but it might not be keeping in line with a mobile first approach.

The forum uses markdown to correctly format code, check out this thread on how to type code in the forum for some examples.