Help Needed with :nth-child Selector

Cheers Jason,

Yes there is only 12 Images in total, 2 Rows and 6 Columns on Desktop, 3 Columns below 768px and then 2 Columns below 480px.

I've just added margin-bottom to each div/image to create the space, It seems to working okay and looks good. If you wanted to suggest an alternative, that would be great!

Thanks for your help Jason!

You're welcome.

I just thought of something else before I come up with a basic demo.

Do the div's only have an img element in them and are all images in the same aspect ratio? What I'm getting at is whether the div's are all the same height or is there a possibility they will have different heights?

The float clearing is really only necessary if the div's are different heights.

Yes, all the images are the same dimensions :)

Hey Tom,

Here's a demo of the basic css (framework agnostic) that you could use to accomplish the layout you describe: https://codepen.io/anon/pen/RrOeMo

It's not necessarily the best or only way to do it but I don't think it's a bad way to go. It doesn't require extra html markup and you don't have to worry about assigning the "first" class to the correct elements.

I'm not sure if you can incorporate this into your project or not.

Let me know if you have any questions about it.

Thanks Jason, much appreciated!

Hi Jason,

I'm having some difficulties trying to stack the divs into two columns, I have the following:

    .home-showcase .one-sixth {
        width: 48.717948717948715%;
    }

    .home-showcase .one-sixth:nth-of-type(odd) {
        clear: none;
        margin-left: 0;
    }

It seems the code is still taking the (3n+1) declaration from the larger media query (768px). Screenshot URL: http://s16.postimg.org/x7o2ik8cl/Screen_Shot_2016_02_18_at_14_19_02.png

Which I'm struggling to overwrite...

Any ideas?

I see 2 columns in the screenshot.

First off, I would get rid of the "first" classes because they are only really correct for the 6 column layout and it might be unnecessarily complicating this.

One thing is that it looks like you are taking a desktop first approach and the codepen demo is mobile first. So everything is going to be reversed but same overall principle.

Basically, in each media query, you need to select the previous pattern and set clear and margin-left back to what they should be for all items and then you select the new pattern for the current number of columns and do clear left and the margin to 0.

Each subsequent media query follows that process. I forked the previous demo and reversed it to a desktop first approach which should help you figure this out. https://codepen.io/anon/pen/WrBrZr

I've included below the last media query with comments to explain the process you want to follow.

@media (max-width: 375px) {
  div {
      width: 48.75%;
  }

/* Select the previous 3 column pattern and set properties back to what they should be for all items */
/* I think this is the step you're missing in your most recent comment. */
/* When this media query kicks in the 768px media query is still active. If there are any styles
in there that you no longer want then you have to override them in this media query */
/* That's what's happening in the following rule. You no longer want the 3n + 1 items to be clearing the floats and having a zero margin. This will mess up the 2 column layout. */
  div:nth-of-type(3n + 1) {
    margin-left: 2.5%;
    clear: none;
  }

/*  Now select the 2 column pattern and zero out the margin and clear the floats. */
  div:nth-of-type(odd) {
    margin-left: 0;
    clear: left;
  }
}

This same process applies to the previous 768 breakpoint but with different patterns. You can check that in the demo.

Let me know if that helps clear it up for you.

Perfect Jason,

This makes much more sense now and will help me in future projects!

Thanks Nicholas!