Menu icon Foundation
Foundation 6 Responsive Equalizer

Can we use media queries with Foundation 6's Equalizer?

In Foundation 5, there was an option to apply equalizer only to certain media query breakpoints (http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html#responsive-equalizer), but I do not see that option in Foundation 6 (http://foundation.zurb.com/sites/docs/equalizer.html).

I am converting a site built with Foundation 5 to Foundation 6 and this is one feature I have not been able to replicate even using the old data options from Foundation 5.

foundation 6Equalizermedia queriesResponsive

Can we use media queries with Foundation 6's Equalizer?

In Foundation 5, there was an option to apply equalizer only to certain media query breakpoints (http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html#responsive-equalizer), but I do not see that option in Foundation 6 (http://foundation.zurb.com/sites/docs/equalizer.html).

I am converting a site built with Foundation 5 to Foundation 6 and this is one feature I have not been able to replicate even using the old data options from Foundation 5.

This post has been closed. No new replies can be added.

Jonas Marlo Loerken almost 4 years ago

Good question! I think there isn't an option like that so far. But you can use your own media-query as well

<div class="row" data-equalizer>
    <div class="large-6 columns custom-class" data-equalizer-wach></div>
    <div class="large-6 columns custom-class" data-equalizer-wach></div>
</div>

.custom-class {
    @include breakpoint(small only) {
        height: auto !important;
    }
}

This snippet will result an auto-height for small devices.

Brett Mason almost 4 years ago

It looks like Equalizer has been re-written on Github and there will be a new option: equalizeOn:"breakpointStr" - see this: https://github.com/zurb/foundation-sites/pull/7482

I'm not sure when this will be released, I think I saw in version 6.1.