why is Bourbon Neat moving 4th item of first row to next row?

Question

I'm trying to implement an image gallery of researchers.

my view template looks like this:

app/views/members/index.html.erb

<div class="researchers">
  <h2>Current Members</h2>
  <% @members.each do |member| %>
    <% if member.active %>
      <div class="researcher">
        <%= link_to member_path(member) do %>
          <%= image_tag member.member_pic.url(:medium) %>
        <% end %>
        <p><%= link_to member.name, member_path(member) %><br><%= member.title %></p>
      </div><!-- .researcher -->
    <% end %>
  <% end %>
</div><!-- .researchers -->

my Sass code looks like this:

  /app/assets/stylesheets/partials/_members.scss

  div.researchers {
    @include clearfix;
    margin-top: 2.25em;
    text-align: center;
    h2 {
      margin-bottom: 3.375em;
    }
  }

  div.researcher {
    @include media($medium-screen) {
      @include span-columns (3);
      @include omega(4n);
    }
  } 

but for some reason is the fourth item of the first row moving to the second row (see screenshot)

as you can see, the other rows have 4 items, but the 1 row has only 3 items. How can I fix this?

thanks for your help,

Anthony

my repo is at:

https://github.com/acandael/hedera-rails

Answer 1

You need to move the h2 outside of the div that contains all the .researcher divs. The h2 is the first child element which is causing the nth-child(4n) rule to be applied to the 3rd, 7th, 11th etc researchers, instead of the 4th, 8th etc.

<h2>Current Members</h2>

<div class="researchers">
  <% @members.each do |member| %>
    <% if member.active %>
      <div class="researcher">
        <%= link_to member_path(member) do %>
          <%= image_tag member.member_pic.url(:medium) %>
        <% end %>
        <p><%= link_to member.name, member_path(member) %><br><%= member.title %></p>
      </div><!-- .researcher -->
    <% end %>
  <% end %>
</div><!-- .researchers -->