Menu icon Foundation
Equalizer equalizing for small viewport (stacked)

Hello!

Using Yeti Launch I have created a 'Basic' and a 'Zurb' template.

Using this example (code below) from F6 docs, columns are not collapsed for small viewport?

I have not been able to find/implement potential solutions found on the forum. Can anybody help please?   

<div class="row" data-equalizer data-equalize-on="medium" id="test-eq">
  <div class="medium-4 columns">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/square-1.jpg">
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="callout" data-equalizer-watch>
      <p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/rectangle-1.jpg">
    </div>
  </div>
</div>

EqualizerviewportF6yeti launchBasic TemplateZURB Template

Hello!

Using Yeti Launch I have created a 'Basic' and a 'Zurb' template.

Using this example (code below) from F6 docs, columns are not collapsed for small viewport?

I have not been able to find/implement potential solutions found on the forum. Can anybody help please?   

<div class="row" data-equalizer data-equalize-on="medium" id="test-eq">
  <div class="medium-4 columns">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/square-1.jpg">
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="callout" data-equalizer-watch>
      <p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/rectangle-1.jpg">
    </div>
  </div>
</div>
Remco Janssen about 3 years ago

What do you mean with 'collapsed'... According to your code it shouldn't equalize on small. Did you try adding s small-12 to the class to see if the equalizing happens when you stack the divs?

Son of Spectrum about 3 years ago

@Remco thanks for your reply.

Let me better describe from a mobile-first perspective:

On a small viewport the content within

<div class="callout" data-equalizer-watch></div>

determines the divs height. On medium and large viewport data-equailzer expands all divs to the height of the div with tallest content. However, although data-equalizer is expanding divs on medium and large viewports, on small viewport the divs are also expanded which should not be the default behaviour. Essentially Equalizer is still triggered when divs are stacked.

When tested in CodePen all acts as it should.

I also just downloaded a 'Complete' manual install on F6 and Equalizer behaves as it should.

Therefore I can only guess that when installing via Yeti Launch, a script in the source file needs to be changed for Equalizer to work correctly.

Rafi Benkual about 3 years ago

It could be that using Yeti Launch will only serve an older version of Foundation. I would recommend using the cli to create the most recent project with Foundation 6 Sass where the default for Equalizer is now to not equalize on small.

Son of Spectrum about 3 years ago

@Rafi Thanks! CLI install results in Equalizer default behaviour working as it should.