DIVI comes with an Equal Column Height Option in the Row Settings. The problem is that some special design applied to modules, e.g. a transparent background, cannot be any longer used on the module but has to be applied to the column, making a free move of modules from a one-column to a multi-equal-column scenario impossible, not even to speak of global modules. I styled a global module that sometimes is used in one colum, sometimes in a two colums setting. So basically the lack of equal module height is killing a true global usage, because the column background can not saved within the module global settings. And if I want to make the module in a more-column setting equal, I would need to remove its background and set it to the column instead. I am working with transparent backgrounds, and if they are applied to both, module and column, they add up. Or also padding gets double if I use a CSS class to style it. So for a true equal height we need a equal module height!
Right now I have to teach my clients that the module styling needs to be applied in the row section to the columns if they use the module in columns. While when they use it in one column they can use the module background color. A completely unintuitive workflow creating a lot of confusion.
Thanks to Dustin from ET support there came up a JQuery workaround that you can copy into the Epanel / Integration / Header section. You need to give a class to the modules sitting in one row, in this example .equal1. You can also enhance the script to work for more classes as done here with .equal2 or more. It is even needed to apply a different class to the modules of each individual row, because the max height is calculated by all the boxes of a class, meaning you might end up with modules of a complete row having a lot of empty space because the ones from another row are much taller.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<script type="text/javascript"> (function($){ // Window Load $(window).load(function() { var viewport = $(window).innerWidth(); if (viewport >= 960) { equal_height($('.equal1')); equal_height($('.equal2')); } }); // Window Resize $(window).resize(function() { var viewport = $(window).innerWidth(); if (viewport >= 960) { equal_height($('.equal1')); equal_height($('.equal2')); } else { $('.equal1').attr('style', ''); $('.equal2').attr('style', ''); } }); function equal_height(group) { var tallest = 0; $(group).attr('style', ''); group.each(function() { var this_height = $(this).height(); if (this_height > tallest) { tallest = this_height; } }); group.height(tallest); } })(jQuery); </script> |
UPDATE: Today Vlad from ET support came up with a new non-JQuery, pure CSS solution, super elegant. You might still use the JQuery in other situations or other themes that are programmed in a different way. But for DIVI, just copy the following CSS into your child-theme or DIVI’s Custom CSS area. Please be aware that this is not tested in all browsers and with all modules, so try out for yourself, check thoroughly and report in the comments if you come across problems:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.et_pb_equal_columns .et_pb_column { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .et_pb_module { max-width: 100% } .et_pb_text_align_center { margin: 0 auto; } |
I suggested to make it a core thing, so let’s see if tricks get superflous in one of the next updates, turning DIVI most probably into the first true Equal Module Height Theme out there. Thanks a lot once more to the ET support and their great and fast help.
Update Oct 2016: It turned out to not work so well with the flexbox, the width of the modules might not be equal and if two modules are placed in the same column the layout get corrupted. Use that one with caution. I am still aiming for an equal module height solution, maybe it just needs a bit more tweaks for the flex. If you found any solid solution, please share in the comments.
Good tip. Using flexbox with Divi modules, columns, & rows really opens up the design possibilities just using CSS.
Beautiful! Thanks a lot
Thank you so much for this! The updated version worked perfectly!
Hi :)
I liked the CSS solution the best, but found that it messed up some combinations like if you did a number counter over a blurb for example. For me, the best solution was to add an ID to the rows I wanted this to take place on, so it would ignore the ones that I didn’t or that it would mess up.
I modified the CSS slightly:
.et_pb_equal_columns #equal {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.et_pb_module {
max-width: 100%
}
.et_pb_text_align_center {
margin: 0 auto;
}
Then added that “equal” to the row > advanced options > column 1 ID, column 2 ID etc fields. That seemed to do the trick for me SO FAR. We shall see. Thanks for the tip :D
Chel’s code worked for me. Thanks.
This was a FAB tip. I’d been wrangling with this for awhile. I dropped the CSS in and immediately got all my modules the same height (they were CTAs, in this case). HOWEVER, it messed up the width. Grr. I’m still learning with CSS & Divi, so I wasn’t sure how to add to this CSS, so I took the simple way out and added the min-width: 100% CSS to each module.
If someone is still looking for this, below is the updated code (not sure if the align center part is really relevant so I just removed it myself). Added the “et_pb_equal_columns” to the module code part to avoid conflicts with regular modules, and changed one rule:
.et_pb_equal_columns .et_pb_column {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.et_pb_equal_columns .et_pb_module {
min-width: 100%; /*that was the mistake in the original fix using max instead of min-width*/
}
boris, if you see this, how do i do your code?? I’m desperately trying to equalize my columns in divi.
hi does your solution still work? if so where do i place the et_pb_equal_columns