{"id":24895,"date":"2021-04-19T12:21:23","date_gmt":"2021-04-19T10:21:23","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=24895"},"modified":"2021-04-19T12:23:42","modified_gmt":"2021-04-19T10:23:42","slug":"how-to-equalize-column-heights-in-divi","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/","title":{"rendered":"How To Equalize Column Heights In Divi"},"content":{"rendered":"\n<p>Let&#8217;s say you are working on a site and designing a 3 column structure with some text and a button. Likely you do not have the same amount of text for each column and now they have different column heights. This looks ugly and unprofessional design, the solution, equalize the column heights so that they have the same height despite the amount of text in it. Equalizing the column heights in Divi is easy to do however this will come with another issue when you have a button in each column, I will cover that too in this tutorial.<\/p>\n\n\n\n<p>What you are going to learn in this tutorial:<\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li>How to equalize column heights<\/li><li>How to align buttons to the bottom of the column<\/li><li>How to make a column background image the same height as the other columns <\/li><\/ul>\n\n\n\n<h2 class=\"gb-headline gb-headline-b3b6eb41 gb-headline-text\">How To Equalize The Column Heights<\/h2>\n\n\n\n<p>For example, you have a 3 column structure with a text and button in it like this:<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"242\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/3-column-with-text-and-button-in-divi.jpg\" alt=\"3 column with text and button in divi\" class=\"wp-image-24897\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/3-column-with-text-and-button-in-divi.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/3-column-with-text-and-button-in-divi-380x135.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/3-column-with-text-and-button-in-divi-300x107.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/3-column-with-text-and-button-in-divi-510x182.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/3-column-with-text-and-button-in-divi-169x60.jpg 169w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/3-column-with-text-and-button-in-divi-253x90.jpg 253w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure><\/div>\n\n\n\n<p>I have added a background color for each column. As you can see above this looks quite ugly so let&#8217;s equalize these columns.<\/p>\n\n\n\n<p>Open the row and go to the design tab. Under Sizing, you can enable Equalize Column Heights.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"397\" height=\"582\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/Equalize-column-height-settings.jpg\" alt=\"Equalize column height settings\" class=\"wp-image-24900\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalize-column-height-settings.jpg 397w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalize-column-height-settings-380x557.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalize-column-height-settings-205x300.jpg 205w\" sizes=\"(max-width: 397px) 100vw, 397px\" \/><\/figure><\/div>\n\n\n\n<p>And now your columns will look like this:<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"233\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/Equalized-column-heights.jpg\" alt=\"Equalized column heights\" class=\"wp-image-24902\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalized-column-heights.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalized-column-heights-380x130.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalized-column-heights-300x103.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalized-column-heights-510x175.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalized-column-heights-175x60.jpg 175w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalized-column-heights-263x90.jpg 263w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure><\/div>\n\n\n\n<p>The 3 columns have now the same height, however, the button is not aligned nicely so let&#8217;s fix that next.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-d62759ea gb-headline-text\">How To Align Buttons To The Bottom Of The Column<\/h2>\n\n\n\n<p>Open your button and go to the advanced tab. Under position use the following settings:<\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li>Change position to Absolute<\/li><li>Change location to left-bottom<\/li><li>Vertical offset 25px<\/li><li>Horizontal offset 25px<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"596\" height=\"796\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/Align-button-to-bottom-of-the-column-in-Divi.jpg\" alt=\"Align button to bottom of the column in Divi\" class=\"wp-image-24904\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Align-button-to-bottom-of-the-column-in-Divi.jpg 596w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Align-button-to-bottom-of-the-column-in-Divi-380x508.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Align-button-to-bottom-of-the-column-in-Divi-225x300.jpg 225w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Align-button-to-bottom-of-the-column-in-Divi-510x681.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Align-button-to-bottom-of-the-column-in-Divi-45x60.jpg 45w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Align-button-to-bottom-of-the-column-in-Divi-67x90.jpg 67w\" sizes=\"(max-width: 596px) 100vw, 596px\" \/><\/figure><\/div>\n\n\n\n<p>You might need to change the vertical and horizontal offset number with the same padding that you are using for your columns, in my case I used 25 px for my column paddings.<\/p>\n\n\n\n<p>Add a 25 px bottom padding to the (text) module above the button. This will make sure that there is always a little space between the button and the module above it.<\/p>\n\n\n\n<p>If you did this it will look now like this:<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"237\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/Equalized-column-height-with-aligned-buttons.jpg\" alt=\"Equalized column height with aligned buttons\" class=\"wp-image-24905\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalized-column-height-with-aligned-buttons.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalized-column-height-with-aligned-buttons-380x132.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalized-column-height-with-aligned-buttons-300x105.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalized-column-height-with-aligned-buttons-510x178.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalized-column-height-with-aligned-buttons-172x60.jpg 172w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalized-column-height-with-aligned-buttons-258x90.jpg 258w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"gb-headline gb-headline-733a3d5e gb-headline-text\">How To Make a Column Background Image The Same Height As The Other Columns<\/h2>\n\n\n\n<p>Another nice thing you can do with the equalizing column feature in Divi is to make a column background image the same height as the other columns. For example, you want to make 2 columns with a text and button and one with an image. I have activated the Equalize Column Heights feature and placed an image module in the second column, but it looks like this:<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"196\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/3-columns-with-and-a-background-image.jpg\" alt=\"3 columns with and a background image\" class=\"wp-image-24907\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/3-columns-with-and-a-background-image.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/3-columns-with-and-a-background-image-380x110.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/3-columns-with-and-a-background-image-300x86.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/3-columns-with-and-a-background-image-510x147.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/3-columns-with-and-a-background-image-190x55.jpg 190w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/3-columns-with-and-a-background-image-312x90.jpg 312w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure><\/div>\n\n\n\n<p>To make the image at the same height as the other 2 columns you can do the following. Remove the image module and open the row and then go to the second column.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"548\" height=\"594\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/Open-second-column.jpg\" alt=\"Open second column\" class=\"wp-image-24909\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Open-second-column.jpg 548w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Open-second-column-380x412.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Open-second-column-277x300.jpg 277w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Open-second-column-510x553.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Open-second-column-55x60.jpg 55w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Open-second-column-83x90.jpg 83w\" sizes=\"(max-width: 548px) 100vw, 548px\" \/><\/figure><\/div>\n\n\n\n<p>Now add a background image to the second column.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"394\" height=\"534\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/Add-a-background-image-to-the-column.jpg\" alt=\"Add a background image to the column\" class=\"wp-image-24910\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Add-a-background-image-to-the-column.jpg 394w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Add-a-background-image-to-the-column-380x515.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Add-a-background-image-to-the-column-221x300.jpg 221w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Add-a-background-image-to-the-column-44x60.jpg 44w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Add-a-background-image-to-the-column-66x90.jpg 66w\" sizes=\"(max-width: 394px) 100vw, 394px\" \/><\/figure><\/div>\n\n\n\n<p>And now the second column has an image that has the equal height of the other columns.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"192\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/Equalized-columns-in-Divi-with-a-background-image.jpg\" alt=\"Equalized columns in Divi with a background image\" class=\"wp-image-24911\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalized-columns-in-Divi-with-a-background-image.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalized-columns-in-Divi-with-a-background-image-380x107.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalized-columns-in-Divi-with-a-background-image-300x85.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalized-columns-in-Divi-with-a-background-image-510x144.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalized-columns-in-Divi-with-a-background-image-190x54.jpg 190w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Equalized-columns-in-Divi-with-a-background-image-319x90.jpg 319w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure><\/div>\n\n\n\n<p>This works great for desktop but for mobile, we need to do one more thing. On mobile, the columns are stacked and not next to each other so the function equalizes column height will not work. This happens because there is nothing in the second column so it will not be visible.<\/p>\n\n\n\n<p>However, this is easy to solve. Place a divider module in the second column and under Visibility > Show Divider set this to No.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"390\" height=\"534\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/Disable-divider-module.jpg\" alt=\"Disable divider module\" class=\"wp-image-24912\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Disable-divider-module.jpg 390w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Disable-divider-module-380x520.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Disable-divider-module-219x300.jpg 219w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Disable-divider-module-44x60.jpg 44w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Disable-divider-module-66x90.jpg 66w\" sizes=\"(max-width: 390px) 100vw, 390px\" \/><\/figure><\/div>\n\n\n\n<p>Then go to the Design tab and under Spacing > Padding add a top and bottom padding.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"388\" height=\"536\" src=\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/Add-padding-to-the-divider.jpg\" alt=\"Add padding to the divider\" class=\"wp-image-24913\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Add-padding-to-the-divider.jpg 388w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Add-padding-to-the-divider-380x525.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Add-padding-to-the-divider-217x300.jpg 217w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Add-padding-to-the-divider-43x60.jpg 43w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Add-padding-to-the-divider-65x90.jpg 65w\" sizes=\"(max-width: 388px) 100vw, 388px\" \/><\/figure><\/div>\n\n\n\n<p>This will give the second column with the background image some content but it will not be visible. Now the background image will be visible for mobile too.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-f338aa81 gb-headline-text\">You Might Also Like&#8230;<\/h3>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><a href=\"https:\/\/www.markhendriksen.com\/how-to-make-the-row-full-width-in-divi\/\">How To Make The Row Full Width In Divi<\/a><\/li><li><a href=\"https:\/\/www.markhendriksen.com\/divi-custom-column-width-tutorial\/\">Divi Custom Column Width Tutorial<\/a><\/li><li><a href=\"https:\/\/www.markhendriksen.com\/how-to-make-a-full-height-section-in-divi\/\">How To Make a Full Height Section In Divi<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s say you are working on a site and designing a 3 column structure with some text and a button. Likely you do not have the same amount of text for each column and now they have different column heights. This looks ugly and unprofessional design, the solution, equalize the column heights so that they [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":24918,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-24895","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Divi Equalize Column Heights | MarkHendriksen.com<\/title>\n<meta name=\"description\" content=\"How to equalize column heights in Divi is easy to do. Just enable the setting equalize column heights in the row settings and you are done.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Divi Equalize Column Heights | MarkHendriksen.com\" \/>\n<meta property=\"og:description\" content=\"How to equalize column heights in Divi is easy to do. Just enable the setting equalize column heights in the row settings and you are done.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/\" \/>\n<meta property=\"og:site_name\" content=\"Mark Hendriksen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/madebymarkhendriksen\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-19T10:21:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-19T10:23:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-equalize-column-heights-in-Divi.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mark Hendriksen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mark Hendriksen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How To Equalize Column Heights In Divi\",\"datePublished\":\"2021-04-19T10:21:23+00:00\",\"dateModified\":\"2021-04-19T10:23:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/\"},\"wordCount\":631,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-equalize-column-heights-in-Divi.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/\",\"url\":\"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/\",\"name\":\"Divi Equalize Column Heights | MarkHendriksen.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-equalize-column-heights-in-Divi.jpg\",\"datePublished\":\"2021-04-19T10:21:23+00:00\",\"dateModified\":\"2021-04-19T10:23:42+00:00\",\"description\":\"How to equalize column heights in Divi is easy to do. Just enable the setting equalize column heights in the row settings and you are done.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-equalize-column-heights-in-Divi.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-equalize-column-heights-in-Divi.jpg\",\"width\":720,\"height\":400,\"caption\":\"How to equalize column heights in Divi\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markhendriksen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Divi tutorials\",\"item\":\"https:\/\/www.markhendriksen.com\/divi-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How To Equalize Column Heights In Divi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markhendriksen.com\/#website\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"name\":\"Mark Hendriksen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markhendriksen.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\",\"name\":\"Mark Hendriksen\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"width\":354,\"height\":40,\"caption\":\"Mark Hendriksen\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/madebymarkhendriksen\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\",\"name\":\"Mark Hendriksen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"caption\":\"Mark Hendriksen\"},\"url\":\"https:\/\/www.markhendriksen.com\/author\/twopixels\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Divi Equalize Column Heights | MarkHendriksen.com","description":"How to equalize column heights in Divi is easy to do. Just enable the setting equalize column heights in the row settings and you are done.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/","og_locale":"en_US","og_type":"article","og_title":"Divi Equalize Column Heights | MarkHendriksen.com","og_description":"How to equalize column heights in Divi is easy to do. Just enable the setting equalize column heights in the row settings and you are done.","og_url":"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2021-04-19T10:21:23+00:00","article_modified_time":"2021-04-19T10:23:42+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-equalize-column-heights-in-Divi.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How To Equalize Column Heights In Divi","datePublished":"2021-04-19T10:21:23+00:00","dateModified":"2021-04-19T10:23:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/"},"wordCount":631,"commentCount":5,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-equalize-column-heights-in-Divi.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/","url":"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/","name":"Divi Equalize Column Heights | MarkHendriksen.com","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-equalize-column-heights-in-Divi.jpg","datePublished":"2021-04-19T10:21:23+00:00","dateModified":"2021-04-19T10:23:42+00:00","description":"How to equalize column heights in Divi is easy to do. Just enable the setting equalize column heights in the row settings and you are done.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-equalize-column-heights-in-Divi.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/How-to-equalize-column-heights-in-Divi.jpg","width":720,"height":400,"caption":"How to equalize column heights in Divi"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markhendriksen.com\/"},{"@type":"ListItem","position":2,"name":"Divi tutorials","item":"https:\/\/www.markhendriksen.com\/divi-tutorials\/"},{"@type":"ListItem","position":3,"name":"How To Equalize Column Heights In Divi"}]},{"@type":"WebSite","@id":"https:\/\/www.markhendriksen.com\/#website","url":"https:\/\/www.markhendriksen.com\/","name":"Mark Hendriksen","description":"","publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markhendriksen.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.markhendriksen.com\/#organization","name":"Mark Hendriksen","url":"https:\/\/www.markhendriksen.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","width":354,"height":40,"caption":"Mark Hendriksen"},"image":{"@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/madebymarkhendriksen"]},{"@type":"Person","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765","name":"Mark Hendriksen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","caption":"Mark Hendriksen"},"url":"https:\/\/www.markhendriksen.com\/author\/twopixels\/"}]}},"_links":{"self":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/24895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/comments?post=24895"}],"version-history":[{"count":3,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/24895\/revisions"}],"predecessor-version":[{"id":24924,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/24895\/revisions\/24924"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/24918"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=24895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=24895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=24895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}