← Back to Upcase

Problem with element stacking under other element


(Acandael Acandael) #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: https://github.com/acandael/posplus

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


(Phil LaPier) #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: http://css-tricks.com/how-nth-child-works/

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

(Acandael Acandael) #3

Hi Phil,

This solved the issue, thanks a lot :smile:

Anthony