Menu icon Foundation
Foundation row and shopify product grid

This is probably incredibly noob question, but couldn't figure it out on my own, so...
Got a static template built on foundation, that i need to adapt to shopify.
Got a problem with equalizer. I've tried data-equalizer-watch for both column and child of a column. For the inline style i get height:inherit; so, all of the columns are different height. What did i do wrong?

<div class="row last-row " data-equalizer>
   <!-- product item -->
   <div class="columns small-12 medium-4 productgridrow"  >
       <div class="product" data-equalizer-watch>
           whatever product info
       </div>
   </div>
</div>
            

         

shopifycollection

This is probably incredibly noob question, but couldn't figure it out on my own, so...
Got a static template built on foundation, that i need to adapt to shopify.
Got a problem with equalizer. I've tried data-equalizer-watch for both column and child of a column. For the inline style i get height:inherit; so, all of the columns are different height. What did i do wrong?

<div class="row last-row " data-equalizer>
   <!-- product item -->
   <div class="columns small-12 medium-4 productgridrow"  >
       <div class="product" data-equalizer-watch>
           whatever product info
       </div>
   </div>
</div>
            

         
Mark Casey over 4 years ago

This may or may not help but I found a fix that said I needed to add this to the JS...

```//required to make equalizer work across rows
$(document).foundation({
equalizer: {
equalize_on_stack: true
}
});

Sharls over 4 years ago

nope... not working...

Rafi Benkual over 4 years ago

If you place it on the columns you'll have better results:

<div class="row" data-equalizer>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
</div>

If this doesn't help, please share all of you markup so we can see where the issue is.