CODEWITHSUNDEEP
javascripthtmlcsszurb-foundationequalizer
Ritardi.Net
Ritardi.Net

Reputation: 99

data-equalizer not working on rowless columns

I'm trying to design a page compatible with different display size, I have 6 elements to use and I want to show 3 on each line for large to landscape devices, 2 per line on medium and 1 per line on small devices. I have done this with the following structure:

<div class="row" data-equalizer>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>    
</div>

so far so good, in the logic at least, the problem is when you have a very small text on some element, let's say that you have a very short text on the 3rd element and a 50-100 characters on the other elements. What happens in this condition on large+ screens is that the 4th and 6th elements are being placed belowthe 3rd and the data-equalizer stop working. The 5th element goes below the 1st and there is a space below the 2nd element.

As you can see I'm using only one row so that the content can rearrange depending on screen size, however this is not working for me, what am I doing wrong?

Upvotes: 1

Views: 397

Answers (1)

Ritardi.Net
Ritardi.Net

Reputation: 99

Found the answer on ZURB forum, here is what I was told to do:

<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>    
</ul>

Link to the answer: http://foundation.zurb.com/forum/posts/35716

Link to docs: http://foundation.zurb.com/docs/components/block_grid.html

Upvotes: 1

Related Questions