May 04, 2021 Foundation5
We can add the
data-equalizer
the container element and
data-equalizer-watch
property to each child element to create an equalizer of the same height.
The highest element determines the height of the other elements.
Note: The slider requires JavaScript. So you need to initialize the development JS:
Set the same height for different screen sizes on the equalizer by adding the
data-equalizer-mq="
value
"
property.
The value can be one of the following:
| Value | Describe | Instance |
|---|---|---|
medium-up
|
The default. Create a container of the same height with a width greater than 40.063em | |
large-up
|
Create a container of the same height with a width greater than 64.063em | Give it a try |
xlarge-up
|
Create a container of the same height with a width greater than 90.063em | Give it a try |
xxlarge-up
|
Create a container of the same height with a width greater than 120.063em | Give it a try |
Add
data-equalizer
the
data-equalizer-watch
properties. T
his connects to the equalizer container together.
Repeat the nested equalizers multiple times to make sure they match: