Make Equalizer Responsive? Supporting Nested Equalizers by triggering based on Media Query

[oller]

I'm using the handy equalizer js library, however I feel it could be extended to go further to support nested scenarios and to fire for certain media queries.

The use-case I have is that the grid layout is getting sufficiently complex that I have the need for nested Equalizers. So at desktop, I have 2 columns, which need to match height, then at mobile, I have 2 cols nested within one of those desktop columns which again need to match height. As it stands Equalizer doesn't support this.

One option would be to potentially add an additional media query flag to the data-equalizer-watch attribute, for example data-equalizer-watch="small" so you can selectively target which elements should be equalised and at what viewports.

Alternatively, leave all the watches as-is and set the flag on the parent data-equalizer i.e. data-equalizer="small", which would then either action or ignore the function.

Has anyone come across this limitation of equalizer? Any thoughts?

[trevanhetzel]

I am in the same boat. I'm kind of shocked that it didn't come with media query support off the bat, since very rarely would you need equal heights on a one-column small screen layout. The need for equal heights tend to start around tablet size, when the columns are next to each other...

[thedeerchild]

@trevanhetzel Equalizer only works on items that are next to each other. Equalizing is turned off when the columns fold under one another on small screens.

[winghouchan]

@thedeerchild Not any more: #4978 😉

[winghouchan]

I'll see if I can drum something up to make Equalizer responsive.

[LDigital84]

+1

[stevesunderland]

👍

[rafibomb]

This feature is not on our roadmap for Foundation Sites v5. We would however accept a PR for it. We'll close this here. Thanks!