Search code examples
bourbonneat

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

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)

enter image description here

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

Solution

  • 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 -->