Problem with element stacking under other element

Design Front End Development
1

Hi,

I’m using the Bourbon Neat Sass library. I have a page that list pictures by 4 in a row:

I implemented this using the mixin’s:

@include span-columns(3 of 12);
@include omega(4n);

This works fine. However, when I added a div element above the pictures, for some reason the last picture from the first row moves to the second row.

Does anyone have a clue why this happens?

my repository is at: GitHub - acandael/posplus: static prototype for research center website, using the Middleman static site generator and Bourbon Neat for styling

the page I’m talking about is source/people.html.erb and the Sass partial is source/stylesheets/partials/_people.scss

the prototype is live at: http://guarded-garden-4334.herokuapp.com/people.html

Thanks for your help,

Anthony

2

To understand the issue, you need to understand how @include omega(*arg); works — neat docs.
Omega generates selectors with the nth-child pseudo-selector. You can read more about them here: How nth-child Works | CSS-Tricks - CSS-Tricks

.member:nth-child( n ) is selecting nth child, regardless of the class, that are within the parent element.

In order to get this to work the way you wish, you need to wrap all div.member elements inside a wrapper element, so that the :nth-child(#) selector can accurately select the correct div.member elements.

<div class="members">
  <div class="member">...</div>
  <div class="member">...</div>
  ...
</div>
1 Like
3

Hi Phil,

This solved the issue, thanks a lot :smile:

Anthony