{"id":103818,"date":"2023-01-31T18:13:38","date_gmt":"2023-01-31T12:43:38","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&#038;p=103818"},"modified":"2023-07-03T17:35:14","modified_gmt":"2023-07-03T12:05:14","slug":"equal-column-height-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/equal-column-height-elementor\/","title":{"rendered":"How to set Equal Column Height in Elementor for FREE (All Widgets)"},"content":{"rendered":"\n<p>When you&#8217;re using Elementor to make your WordPress website you often come across the need to make equal height columns to maintain consistency in your layout. While creating the mockups for websites, we always see everything is evenly laid; however, that doesn\u2019t always work out in production sites due to non-uniform content, especially in side by side columns leading to uneven column heights.<\/p>\n\n\n\n<p>Here we\u2019ll show you how you can fix this equal height column issue in Elementor for free, using the Equal Height option of The Plus Addons for Elementor.<\/p>\n\n\n\n<p>The methods we\u2019ll discuss here will work with all the Elementor widgets and even with any 3rd party Elementor addons widgets like The Plus Addons for Elementor\u2019s and its 120+ widgets.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/plus-extras\/equal-height?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Required Setup<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor FREE Plugin<\/a> installed &amp; activated.<\/li>\n\n\n\n<li>You need to have <a href=\"https:\/\/wordpress.org\/plugins\/the-plus-addons-for-elementor-page-builder\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">The Plus Addons for Elementor<\/a> plugin installed and activated.<\/li>\n\n\n\n<li>Make sure the Equal Height option is activated, to verify this visit Plus Settings \u2192 and scroll down to Plus Extras, look for Equal Height and activate.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Set Equal Height Columns in Elementor? [Video Tutorial]<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Fix Equal Column Heights for all Elementor widgets for FREE\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/SQ-_aAQ_cww?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Activate the Equal Height Extension?<\/h2>\n\n\n\n<p>Go to&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Plus Settings <\/strong>\u2192<strong> Plus widgets&nbsp;<\/strong><\/li>\n\n\n\n<li>Scroll down to <strong>Plus Extras, <\/strong>look for <strong>Equal Height<\/strong> and<strong> turn on the toggle <\/strong>then<strong> <\/strong>click <strong>Save.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"487\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-activate-1024x487.png\" alt=\"equal height activate\" class=\"wp-image-103820\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-activate-1024x487.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-activate-300x143.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-activate-768x365.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-activate-1536x730.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-activate-600x285.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-activate.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Why do you need Elementor Equal Height Options?<\/h2>\n\n\n\n<p>When you have uneven column heights on your website due to the amount of content, it looks out of place, especially if you have some kind of background or border on your columns.<\/p>\n\n\n\n<p>Even though Elementor is constantly improving as a page builder, like the introduction of the Flexbox container (still in beta mode at the time of writing), which is fantastic but even with that solving the equal height column issue is not a straightforward one. You have to use custom CSS that too with Elementor Pro to target specific sections of your layout.<\/p>\n\n\n\n<p>This is where The Plus Addons for Elementor\u2019s Equal Height (free) option can be really useful, with the Equal Height option you can easily make your columns have the same height without any CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Make Column Height Equal in Elementor?<\/h2>\n\n\n\n<p>To make column height equal in Elementor using the Equal Height option of The Plus Addons for Elementor you\u2019ll always have to apply the equal height to the parent container or the container containing the columns. Once you select the container, go to <strong>Advanced<\/strong> &gt; <strong>Plus Extras : Equal Height<\/strong> &gt; <strong>Equal Height<\/strong> and turn on the toggle.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"299\" height=\"585\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-option.png\" alt=\"equal height option\" class=\"wp-image-103821\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-option.png 299w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-option-153x300.png 153w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/><\/figure>\n\n\n\n<p>Now you\u2019ll find two methods that you can use to make the height of your columns equal &#8211;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Div Level<\/strong> &#8211; Using this method you have to specify the nested level of your element or widget from its parent container.<\/li>\n\n\n\n<li><strong>Unique Class<\/strong> &#8211; In this method you have to target the CSS class of your element or widget.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: In order to use these methods you have to use the browser inspect element tools, so familiarity with the browser dev tools would be an added advantage. <\/em>&nbsp;<\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>We\u2019ll discuss each method in more detail below.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Method 1: Using Div Level?<\/h3>\n\n\n\n<p>To use the Div Level, select the main container, and after turning on the Equal Height option, from the <strong>Mode Based on<\/strong> dropdown choose <strong>Div Level<\/strong>.<\/p>\n\n\n\n<p>Now you\u2019ll see two dropdown options <strong>Select Nested Level<\/strong> and <strong>Select Sub Nested Level, <\/strong>from the dropdowns you have to mention the level number for each one.<\/p>\n\n\n\n<p>How this works, first you have to identify the element that is causing the uneven height issue or find the element that you want to target to make the equal height using the Inspect Element of your browser.&nbsp;<\/p>\n\n\n\n<p>Then from there go to its parent container and from there move upwards in the HTML hierarchy until you find the div containing class \u201c<strong>elementor-widget-container<\/strong>\u201d and count the number of parent divs in between and that will be your level for <strong>Select Nested Level<\/strong>.<\/p>\n\n\n\n<p>For the <strong>Select Sub Nested Level <\/strong>select the immediate parent level of your targeted element and go downwards in the HTML hierarchy till your targeted element, count the number of divs in between that will be your level for <strong>Select Sub Nested Level<\/strong>.<\/p>\n\n\n\n<p>Let\u2019s understand by an example, below there are three testimonials with uneven heights, looking at it, the text seems to be causing the issue, let\u2019s right-click on it and select Inspect (this will work on most browsers). &nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"917\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/inspect-div-demo.gif\" alt=\"inspect div demo\" class=\"wp-image-103822\"\/><\/figure>\n\n\n\n<p>Now from the selected element, we have to go to its parent container and then go upwards and find the div containing class <strong>elementor-widget-container<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"469\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-1024x469.png\" alt=\"equal height div level\" class=\"wp-image-103823\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-1024x469.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-300x137.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-768x352.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-1536x703.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-600x275.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level.png 1747w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>It is 2 levels up, so in the <strong>Select Nested Level <\/strong>dropdown we\u2019ll select <strong>Nested Level 2<\/strong>. Now for <strong>Select Sub Nested Level <\/strong>we have to select the parent container of our selected element and go downwards.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"447\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-down-1024x447.png\" alt=\"equal height div level down\" class=\"wp-image-103824\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-down-1024x447.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-down-300x131.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-down-768x335.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-down-1536x670.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-down-600x262.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-down.png 1729w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>It is 1 level down so in the <strong>Select Sub Nested Level <\/strong>dropdown select <strong>Level 1<\/strong>. Now the settings should look something like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"670\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-settings.png\" alt=\"equal height div level settings\" class=\"wp-image-103825\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-settings.png 299w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-settings-134x300.png 134w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/><\/figure>\n\n\n\n<p>This will now make all the testimonials of the same height by adding a min-height.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"445\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-min-height-1024x445.png\" alt=\"equal height div level min height\" class=\"wp-image-103826\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-min-height-1024x445.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-min-height-300x130.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-min-height-768x334.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-min-height-1536x668.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-min-height-600x261.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-min-height.png 1736w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can learn more about this method from our video.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Fix Equal Column Heights for all Elementor widgets for FREE\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/SQ-_aAQ_cww?start=191&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Method 2: Using Unique CSS Class?<\/h3>\n\n\n\n<p>The second method is using a unique CSS class which is more simpler and popular choice, to use the Unique Class method select the main container and after turning on the Equal Height option from the <strong>Mode Based on<\/strong> dropdown choose <strong>Unique Class<\/strong>.<\/p>\n\n\n\n<p>In this method too you have to find the element that is causing the height problem or you can select its parent container as well using the browser Inspect Element tool.<\/p>\n\n\n\n<p>Once you identify the element copy its class and paste the same in the <strong>Enter Unique Class<\/strong> field.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: You can add the selected elements parent classes as well to make it more specific.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>Now let\u2019s follow the same example as above only this time we\u2019ll use the <strong>Unique Class<\/strong> method to make the equal height columns.<\/p>\n\n\n\n<p>Right-click on the testimonial text and click on Inspect and copy the class.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1919\" height=\"882\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/inspect-css-class.gif\" alt=\"inspect css class\" class=\"wp-image-103828\"\/><\/figure>\n\n\n\n<p>We found the class name as \u201c<strong>elementor-testimonial-content<\/strong>\u201d now just go back to the Elementor editor page and in the <strong>Enter Unique Class<\/strong> field paste the class name with a <strong>.<\/strong>(dot) in front like this \u201c<strong>.elementor-testimonial-content<\/strong>\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"301\" height=\"544\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-unique-class-settings.png\" alt=\"equal height unique class settings\" class=\"wp-image-103829\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-unique-class-settings.png 301w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-unique-class-settings-166x300.png 166w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><\/figure>\n\n\n\n<p>That\u2019s it! it will now make all the columns equal in height.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"445\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-min-height-1024x445.png\" alt=\"equal height div level min height\" class=\"wp-image-103826\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-min-height-1024x445.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-min-height-300x130.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-min-height-768x334.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-min-height-1536x668.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-min-height-600x261.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/equal-height-div-level-min-height.png 1736w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can learn more about this method from our video.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Fix Equal Column Heights for all Elementor widgets for FREE\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/SQ-_aAQ_cww?start=649&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>As you can see with both methods, you can solve the Elementor equal column height problem it is up to your preference which one you choose.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Real World Use Cases for Elementor Equal Height<\/strong><\/p>\n\n\n\n<p>Let\u2019s understand the concept with a few more examples.<\/p>\n\n\n\n<p>For these examples we\u2019ll be using The Plus Addons for Elementor, to follow along you can download the free plugin or if you prefer you can use any Elementor widget the process will be the same.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fixing Equal Height for Elementor Infobox<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"400\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-1024x400.png\" alt=\"infobox demo\" class=\"wp-image-103831\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-1024x400.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-300x117.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-768x300.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-600x234.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo.png 1161w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In this example, we have 4 infobox widgets with uneven height, to make them equal height let\u2019s select the main container and go to <strong>Advanced<\/strong> &gt; <strong>Plus Extras : Equal Height<\/strong> &gt; <strong>Equal Height<\/strong> and turn on the toggle.<\/p>\n\n\n\n<p><br>For this one, we\u2019ll be using the <strong>Div Level <\/strong>option so from the <strong>Mode Based on<\/strong> dropdown choose <strong>Div Level <\/strong>and from the frontend open the Inspect Element tool of your browser.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"489\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-inspect-1024x489.png\" alt=\"infobox demo inspect\" class=\"wp-image-103832\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-inspect-1024x489.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-inspect-300x143.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-inspect-768x367.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-inspect-1536x733.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-inspect-600x286.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-inspect.png 1919w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>On checking, we can see the <strong>service-center<\/strong> div needs to be targeted to make all columns equal height.<\/p>\n\n\n\n<p><br>As we learned earlier we need to move upwards from there till the class <strong>elementor-widget-container <\/strong>and count the number of divs in between.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"487\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-nested-level-1024x487.png\" alt=\"infobox demo nested level\" class=\"wp-image-103833\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-nested-level-1024x487.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-nested-level-300x143.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-nested-level-768x366.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-nested-level-1536x731.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-nested-level-600x286.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-nested-level.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>We can see it is 6 levels up so in the Elementor editor in the <strong>Select Nested Level <\/strong>dropdown we\u2019ll select <strong>Nested Level 6<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"487\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-sub-nested-level-1024x487.png\" alt=\"infobox demo sub nested level\" class=\"wp-image-103834\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-sub-nested-level-1024x487.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-sub-nested-level-300x143.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-sub-nested-level-768x366.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-sub-nested-level-1536x731.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-sub-nested-level-600x286.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-sub-nested-level.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now for <strong>Select Sub Nested Level <\/strong>we have to select the parent container of <strong>service-center<\/strong> and go downwards.<\/p>\n\n\n\n<p>&nbsp;<br>It is 1 level down so in the <strong>Select Sub Nested Level <\/strong>dropdown select <strong>Level 1<\/strong>. Now the settings should look something like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"301\" height=\"607\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-settings.png\" alt=\"infobox demo settings\" class=\"wp-image-103835\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-settings.png 301w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-settings-149x300.png 149w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><\/figure>\n\n\n\n<p>Now all our infobox should be of the same height.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/infobox-demo-final-1024x346.png\" alt=\"infobox demo final\" class=\"wp-image-103836\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Fixing Equal Height for Elementor Process Steps<\/h2>\n\n\n\n<p>So far we used <strong>Div Level <\/strong>on individual widgets placed in different columns now we\u2019ll use the <strong>Div Level <\/strong>on a single widget that creates multiple columns and make them equal in height.<\/p>\n\n\n\n<p>For this, we\u2019ll use the Process\/Steps widget of The Plus Addons for Elementor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"474\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-1024x474.png\" alt=\"steps demo\" class=\"wp-image-103837\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-1024x474.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-300x139.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-768x355.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-600x278.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo.png 1150w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Here in the example, we can see 3 steps with different heights, since it is a single widget and everything is inside we can select the widget itself and go to <strong>Advanced<\/strong> &gt; <strong>Plus Extras : Equal Height<\/strong> &gt; <strong>Equal Height<\/strong> and turn on the toggle.<\/p>\n\n\n\n<p><br>From the <strong>Mode Based on<\/strong> dropdown choose <strong>Div Level <\/strong>and open the Inspect Element tool of your browser from the frontend.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"488\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-inspect-1024x488.png\" alt=\"steps demo inspect\" class=\"wp-image-103838\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-inspect-1024x488.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-inspect-300x143.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-inspect-768x366.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-inspect-1536x732.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-inspect-600x286.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-inspect.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>As we can see the content area is uneven here so we\u2019ll target that to fix the height and the div has a class name of <strong>tp-ps-right-content<\/strong>.<strong>&nbsp;<\/strong><\/p>\n\n\n\n<p><br>Now we\u2019ll move up to count the number of parent divs till <strong>elementor-widget-container<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"487\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-nested-level-1024x487.png\" alt=\"steps demo nested level\" class=\"wp-image-103839\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-nested-level-1024x487.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-nested-level-300x143.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-nested-level-768x366.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-nested-level-1536x731.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-nested-level-600x286.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-nested-level.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>It is 3 levels up so in the Elementor editor in the <strong>Select Nested Level <\/strong>dropdown we\u2019ll select <strong>Nested Level 3<\/strong>.<\/p>\n\n\n\n<p><br>Now for <strong>Select Sub Nested Level <\/strong>we have to select the parent container of <strong>tp-ps-right-content<\/strong> and go downwards.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"489\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-sub-nested-level-1024x489.png\" alt=\"steps demo sub nested level\" class=\"wp-image-103840\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-sub-nested-level-1024x489.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-sub-nested-level-300x143.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-sub-nested-level-768x367.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-sub-nested-level-1536x734.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-sub-nested-level-600x287.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-sub-nested-level.png 1918w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>It is 2 levels down so in the <strong>Select Sub Nested Level <\/strong>dropdown select <strong>Level 2<\/strong>. Now the settings should look something like this and this will make all the steps have equal height.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"302\" height=\"832\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-settings.png\" alt=\"steps demo settings\" class=\"wp-image-103841\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-settings.png 302w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/steps-demo-settings-109x300.png 109w\" sizes=\"(max-width: 302px) 100vw, 302px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Fixing Equal Height for Elementor Blog Post Listing<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"479\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/blog-demo-1024x479.png\" alt=\"blog demo\" class=\"wp-image-103842\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/blog-demo-1024x479.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/blog-demo-300x140.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/blog-demo-768x359.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/blog-demo-600x281.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/blog-demo.png 1154w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In this example, we have four blog posts in a grid format but their heights are not equal. We have created this beautiful listing using the Blog\/Post Listing widget of The Plus Addons for Elementor, for more such powerful widgets you can try out The Plus Addons for Elementor.<\/p>\n\n\n\n<p>For this instance, we\u2019ll use the <strong>Unique Class <\/strong>method and since this is a single widget we can select the widget itself and go to <strong>Advanced<\/strong> &gt; <strong>Plus Extras : Equal Height<\/strong> &gt; <strong>Equal Height<\/strong> and turn on the toggle.<\/p>\n\n\n\n<p><br>From the <strong>Mode Based on<\/strong> dropdown choose <strong>Unique Class <\/strong>and open the Inspect Element tool of your browser from the frontend.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"490\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/blog-inspect-1024x490.png\" alt=\"blog inspect\" class=\"wp-image-103843\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/blog-inspect-1024x490.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/blog-inspect-300x144.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/blog-inspect-768x368.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/blog-inspect-1536x735.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/blog-inspect-600x287.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/blog-inspect.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now looking at the demo we can see the post title is causing the height problem but instead of targeting the post title we should target the content area with the class name <strong>post-content-bottom<\/strong> because even the post description can have a different amount of content.<\/p>\n\n\n\n<p><br>Copy the class name then go back to Elementor editor and paste it in the <strong>Enter Unique Class<\/strong> field with a <strong>.<\/strong>(dot) in front like this <strong>.post-content-bottom<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"767\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/blog-settings.png\" alt=\"blog settings\" class=\"wp-image-103844\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/blog-settings.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/blog-settings-117x300.png 117w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>That&#8217;s it this will make all the blog posts have equal height.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/blog-demo-final-1024x489.png\" alt=\"blog demo final\" class=\"wp-image-103845\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Fixing Equal Height for Elementor Pricing Table<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"491\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/pricing-table-demo-1024x491.png\" alt=\"pricing table demo\" class=\"wp-image-103846\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/pricing-table-demo-1024x491.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/pricing-table-demo-300x144.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/pricing-table-demo-768x368.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/pricing-table-demo-600x288.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/pricing-table-demo.png 1185w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Here we have a pricing table with 3 different plans but they are not of equal heights, they don\u2019t look good let\u2019s make them all equal height.<\/p>\n\n\n\n<p>For this once again we\u2019ll use the <strong>Unique Class <\/strong>method, so select the parent container and go to <strong>Advanced<\/strong> &gt; <strong>Plus Extras : Equal Height<\/strong> &gt; <strong>Equal Height<\/strong> and turn on the toggle.<\/p>\n\n\n\n<p><br>From the <strong>Mode Based on<\/strong> dropdown choose <strong>Unique Class <\/strong>and open the Inspect Element tool of your browser from the frontend.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"488\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/pricing-table-inspect-1024x488.png\" alt=\"pricing table inspect\" class=\"wp-image-103847\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/pricing-table-inspect-1024x488.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/pricing-table-inspect-300x143.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/pricing-table-inspect-768x366.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/pricing-table-inspect-1536x732.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/pricing-table-inspect-600x286.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/pricing-table-inspect.png 1919w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>As we can see the number of listing items is causing the height problem here so we\u2019ll target that, here it has a class name of <strong>plus-icon-list-items<\/strong>.<\/p>\n\n\n\n<p><br>Copy the class name then go back to Elementor editor and paste it in the <strong>Enter Unique Class<\/strong> field with a <strong>.<\/strong>(dot) in front like this <strong>.plus-icon-list-items<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/pricing-table-settings.png\" alt=\"pricing table settings\" class=\"wp-image-103848\"\/><\/figure>\n\n\n\n<p>This will make all the pricing table to have equal height.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions<\/h2>\n\n\n\n<div class=\"wp-block-rank-math-faq-block\"><div class=\"rank-math-faq-item\"><h3 class=\"rank-math-question\">Does this Equal Height option work on all devices?<\/h3><div class=\"rank-math-answer\">Yes, it will work on all devices. Because The Plus Addons for Elementor Equal Height option dynamically calculates the height of your targeted element so it will be 100% responsive.<\/div><\/div><div class=\"rank-math-faq-item\"><h3 class=\"rank-math-question\">How to make two columns the same height in Elementor?<\/h3><div class=\"rank-math-answer\">You can use the Equal Height option of The Plus Addons for Elementor to make your columns have equal height, you can either use Div Level or Unique Class method to do this.<\/div><\/div><div class=\"rank-math-faq-item\"><h3 class=\"rank-math-question\">Which option is better Div Level or Unique Class?<\/h3><div class=\"rank-math-answer\">Both the options are equally powerful and it\u2019s up to your preference but the Unique Class method is relatively simple for most users.<\/div><\/div><\/div>\n","protected":false},"author":16,"featured_media":104356,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[542,525],"class_list":["post-103818","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-equal-height","docs-plus-extras"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/103818","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=103818"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/103818\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104356"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=103818"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=103818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}