Sky Addons for Elementor

⌘K
  2. Home
  4. Sky Addons for Elementor
  6. Extensions & Features
  8. Equal Height

Equal Height

How to use Equal Height features of Sky Addons for WordPress

The Sky Addons Equal Height extension for Elementor automatically equalizes the height of widgets inside a section or container — no more uneven cards, info boxes, or pricing columns when one has more text than the others. Enable it on the parent section/container, choose which elements to match (all widgets, hand-picked widgets, nested child elements, or a custom selector), and the extension measures the tallest item and sizes the rest to match. You can even switch it off on tablet or mobile where columns stack anyway.

Key Features

  1. Works on Elementor Sections and Flexbox Containers
  2. Nine targeting modes — from all widgets down to third-level child elements or a custom CSS selector
  3. Hand-pick exactly which widgets to equalize with the Select Widgets list
  4. Apply the matched size as height or min-height
  5. Disable independently on tablet and mobile
  6. Scripts load only on pages where the feature is enabled

Activate Equal Height Module

Equal Height is a core module in Sky Addons that comes pre-activated. However, if you need to verify its status:

  1. Navigate to your WordPress Dashboard and locate “Sky Addons” in the left sidebar menu
  2. Click on the “Modules” tab within the Sky Addons dashboard
  3. Find “Equal Height” in the modules list
  4. Ensure the toggle switch is in the “On” position
  5. Save your changes if you made any adjustments

Using Equal Height

  1. Open the Elementor Editor and select the Section or Container that holds your columns of cards/widgets
  2. Navigate to the Advanced tab
  3. Locate the Equal Height section (marked with the Sky Addons icon)
  4. Toggle Enable to activate height matching for the elements inside

Equal Height Controls

  1. Enable — Activates equal height for this section/container.
  2. Apply Elements — What gets equalized: Widgets (every widget inside), Select Widgets (pick specific ones — the default), Widgets > 1st/2nd/3rd Element (a direct child of each widget), Widgets > Child > 1st/2nd Element and Widgets > Child > Child > 1st Element (deeper nested elements, useful for matching inner card bodies), or Custom (your own CSS selector).
  3. Select Widgets — In Select Widgets mode, a multi-select list of the widgets inside the section so you can equalize only the ones you choose.
  4. Custom Selector — In Custom mode, enter a class such as .class-name to match elements directly.
  5. CSS Property — Apply the computed size as Height (default) or Min-Height (lets items still grow if content changes later).
  6. Disable on Tablet / Disable on Mobile — Turn the effect off per device. Mobile is disabled by default since stacked columns don’t need matching heights.

Save and Preview

  1. Once you’ve configured equal height, click “Publish” or “Update” to save your changes.
  2. Preview the page and resize the browser to confirm the heights match at each breakpoint.

Troubleshooting

  1. Heights not matching: Make sure Enable is on for the parent section/container of the items — not on the widgets themselves — and that the Apply Elements mode actually targets the element you expect.
  2. Only part of the card is equalized: Use one of the nested modes (Widgets > 1st Element, Widgets > Child > …) or the Custom selector to target the inner element that varies in height.
  3. Works on desktop but not mobile: Disable on Mobile is on by default — switch it off if you genuinely need matched heights on small screens.

Frequently Asked Questions

How do I make Elementor columns or cards the same height?

Select the parent Section or Container, open the Advanced tab, find the Equal Height section from Sky Addons, and toggle Enable. The widgets inside are measured and matched to the tallest one automatically.

Can I equalize only certain widgets inside a section?

Yes. Keep Apply Elements on Select Widgets (the default) and pick the exact widgets from the multi-select list. Everything else in the section keeps its natural height.

What’s the difference between Height and Min-Height in the CSS Property option?

Height locks every targeted element to exactly the tallest item’s height. Min-Height sets that value as a floor, so elements still expand if their content later grows beyond it — the safer choice for dynamic content.

Why is Equal Height off on mobile by default?

On mobile, columns usually stack vertically, so forcing equal heights just adds empty space. Disable on Mobile defaults to on; switch it off in the Equal Height section if your layout keeps multiple columns on small screens.

Does the Equal Height extension work with Flexbox Containers?

Yes. The Equal Height section appears in the Advanced tab of both classic Sections and Elementor Flexbox Containers, with the same set of controls.

Related Documentation

Conclusion

The Equal Height extension by Sky Addons for Elementor fixes one of the most common layout headaches — uneven card heights — with a single toggle and smart targeting options. If you have any questions while using Equal Height, the Sky Addons support team is happy to help.

How can we help?