How to make Elementor columns equal in height (also Flexbox containers)

When you create and arrange columns in your website, they must have the same height so that the whole design looks neater. This can be accomplished with the right HTML The code accomplishes this, but it's really challenging for non-technical users who don't know how to code.

This article will show you how to make Elementor Columns are equal in height and include Flexbox Container. Please continue reading until the end.

Is the isometric feature really necessary?

When designing a website, you may notice that some columns or widgets have inconsistent heights. The height usually depends on the content they contain. Take a closer look at the image above.

From first glance, do you like the picture on the left? We can predict you won't like it! Just like you, most people will find it disjointed. And the picture on the right looks better and neater.

How to use HappyAddons isometrics

This feature works seamlessly with all Elementor widgets. You can also apply this feature to widgets of other third-party plugins. Make sure you have the following plugins installed and activated:

• Elementor
• HappyAddons(Elementor plug-in)

Once you have completed these steps, the next step is to follow the directions below.

Method 1: Using Isometrics on Elementor Widgets

To explain this approach, we chose the Elementor of the price list widget and filled in some content for it.

• Select Price List Widget Configure the widget to add text, prices, labeled bands and other details according to your needs. The information in each section may not match, so you may notice uneven heights in the price list widget.

• Customized Widgets Next, click on the "Edit Section" option in the menu bar.

• Go to the editing section After that, go to the advanced section and you will see the contour option, enable it and then you will see the magic.

• Enable Isometric Option Then, select the widget you want to adjust. Here, you can disable the tablet and phone modes.

• Disable tablet and cell phone mode Finally, choose the appropriate margins and you will see that the height of all the widgets is now the same.

• Checking the height of widgets Looking closely, even though we added different levels of content to each column of the price list, using HappyAddons' equal height feature, all the columns became the same height, and the overall look was much neater.

Method 2: Using Isometrics on HappyAddons Widgets

Let's apply this functionality to the HappyAddons widget. Select one of the widgets in the menu bar, and we've chosen the Card widget to show the whole process of adjusting the height.

• Select a widget as requiredCustomized Widgets. You can add images, text and other designs. Since the data in each section may not match, you will notice that the widgets have different heights.

• Customize selected widgets Now, let's fix the height of each section. Click on "Edit Section" in the menu bar.

• Fix height in menu bar Then go to the Advanced section and you'll find the Isometric option. Enable it.

• Enable Isometric Option As shown above, you have the option to disable tablet and phone mode.

• Disable tablet and cell phone mode Choose the right height and see the final result!

Method 3: Equalize Elementor containers with this function

Earlier, the contour feature was only available for column-based designs. But now, you can use this feature to make multiple vertically aligned Flexbox The heights of the containers are equal. As shown below, we have two containers in the same section, one taller than the other.

• Select the entire section Click on the six-dot icon to select the entire section and go to Advanced Settings.
• Enable Isometric Option Find the Equal Height option in Advanced Settings and enable it. Select the corresponding widgets and you will see that the heights of the containers become equal.

summarize

In this way, you can apply this feature to any widgets and content using Flexbox containers.The isometric feature provided by HappyAddons allows designers to quickly and efficiently solve the problem of inconsistent column heights, making the whole page look neater and more professional without having to write any complex code.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off