0

I'm trying to implement four-column rows with the @include span-columns mixin:

div.people {
  @include outer-container(80%);

  .researchers {
    @include span-columns(12);
    text-align: center;
  }

  .researcher {
    @include span-columns (3 of 12);
    @include omega(4n);
  } 
}

my html-markup looks like this:

<div class="people">
  <header>
    <h1>PEOPLE</h1>
  </header>
  <div class="researchers">
    <div class="researcher">
      <a href="/veerle-buffel.html">
      <%= image_tag "sarah-van-leuven.jpg" %>
      <p>Veerle Buffel<br>Doctoral researcher</p>
    </div><!-- .researcher -->
    <div class="researcher">
      <a href="/elise-rondelez.html">
      <%= image_tag "sarah-van-leuven.jpg" %>
      <p>Elise Rondelez<br>PhD researcher</p>
    </div><!-- .researcher -->
    ...
  </div><!-- .researchers -->
</div><!-- .people -->

but instead of four columns I only get two-column rows:

enter image description here

how can I fix this, so I get a four elements per row instead of two.

thanks for your help,

Anthony

Toontje
  • 1,415
  • 4
  • 25
  • 43
  • Done a reduced-scope codepen for your issue Anthony and it looks fine: http://codepen.io/mikehdesign/pen/GjExRm – Mike Harrison Sep 28 '16 at 13:42
  • Would also say I wouldn't have the `span-columns(12)` on `.researchers` - just have an `@include row();` instead. Then you can simply have `span-columns(3)` for the `.researcher` – Mike Harrison Sep 28 '16 at 13:48
  • hi Mike, thanks for the code. I'm still getting only two elements on a row. Not sure why. – Toontje Sep 28 '16 at 14:28
  • ah, found the issue, apparently I forgot to close the anchor tag around the images – Toontje Sep 28 '16 at 14:46

0 Answers0