Hi Matth,
Thank you for reaching out to us. You can give separate classes to your sections e.g equal-height-1
, equal-height-2
etc and then apply JS for each section:
jQuery(document).ready(function($) {
var max1 = 0, max2 = 0;
$(".equal-height-1 .x-column").each(function(index, el) {
if( $(this).height() > max1 ){
max1 = $(this).height();
}
});
$(".equal-height-1 .x-column").css('height', max1);
$(".equal-height-2 .x-column").each(function(index, el) {
if( $(this).height() > max2 ){
max2 = $(this).height();
}
});
$(".equal-height-2 .x-column").css('height', max2);
});
You can also refer to the following article here https://theme.co/apex/forum/t/code-snippet-make-all-columns-equal-height/272
Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.
Hope this helps!