Responsive equal column height

Support
#1

Im seeing all sorts of different recommendation for css and js code to fix this issue - getting very confusing and nothing has worked…I have added gap shortcode in the text editor but column height still varies on different screen sizes - clearly this is not the way either.

3 columns need to be same height and be responsive over screen sizes 1024 to 1920 (anything under puts them one under the other and height is not an issue then…

page: http://flightdisruptions.sixfive.com.au/about-us/

thank you for your support,

#2

Hi There,

Thank you for writing in, are you referring to the section with 3 promo element? If so, please add a CLASS equal-height on each of those Promo element.

Then add this on Theme Options > JS

jQuery(document).ready(function($){
    var highestBox = 0;
    mobile = $(window).width();
    if ( mobile > 767 ){
	        $('.equal-height').each(function(){  
	                if($(this).height() > highestBox){  
	                highestBox = $(this).height();  
	        }
	    });    
	    $('.equal-height').height(highestBox);
	    $('.equal-height' ).css( "background-color", "#fff" );
	}
});

Hope it helps,
Cheers!

1 Like