Equal columns

Support
#1

Hi, i’m trying to use the code snippet mentioned here: https://theme.co/apex/forum/t/code-snippet-make-all-columns-equal-height/272 to get equal column heights. It seams to be causing issues though.

I have 3 columns, two with buttons and each with background colours. To have the div even expand around the content, I first need to add a min-height in css. Even with that, when I implement the snippet, it drops the buttons below the bottom of the column div. If I add a gap, it does nothing.

Any ideas?

I’m working on the site but I can replicate the issue if you need to see it happening.

Thank you

#2

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#4

hello here is my info

#5

Hello There,

Thanks for providing the login credentials. You will need to update the JS code to make it work in your homepage. You can make use of this code instead:

  jQuery(document).ready(function($) {
	var max = 0;
	$("#x-section-3 .x-column").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).height();
		}
	});
	$("#x-section-3 .x-column").css('height', max);

	var max = 0;
	$(".x-colophon .x-column").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).height();
		}
	});
	$(".x-colophon .x-column").css('height', max);
  });

We would loved to know if this has work for you. Thank you.

#6

I does sort of work. The columns are the same height but here are the issues:

  • the buttons sit at the very bottom of the boxed div regardless of the padding I add or the gap that is at the bottom on the column. (http://imgur.com/a/DfhbD)
  • If i shrink the area, the text in the last box starts to run outside of the column. (http://imgur.com/a/DfhbD)

It didn’t do anything for the footer, just the boxes on the homepage.

Thank you

#7

Hi There,

Can you try this one:

			setTimeout(function(){ 
								
								
				var max = 0;
				jQuery("#x-section-3 .x-column").each(function(index, el) {
					if( jQuery(this).height() > max ){
						max = jQuery(this).height();
					}
				});
				jQuery("#x-section-3 .x-column").css('height', max);
			
				var max = 0;
				jQuery(".x-colophon .x-column").each(function(index, el) {
					if( jQuery(this).height() > max ){
						max = jQuery(this).height();
					}
				});
				jQuery(".x-colophon .x-column").css('height', max);
			  
			
			}, 5000);

It seems that other columns content is not yet fully loaded before the code execute so it doesn’t really get the full height. 5000 means 5seconds.
https://www.w3schools.com/jsref/met_win_settimeout.asp

Hope this helps.

#8

hmmm doesn’t seam to be working still.

Sometimes it takes and other times it doesn’t seam to work. Sometimes it only works after sometime.

When it does work, the bottom padding isn’t taking, and the middle footer column is expanding past it’s area.

Let me know what you think. Thank you

#9

Hi there,

Please kindly remove any JavaScript code that you have added to the theme for the equal height functionality.

Instead, go to X > launch > options > CSS and input the code below there:

#x-section-3 .x-container,
.x-colophon.top .x-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
}

#x-section-3 .x-container > .x-column,
.x-colophon.top .x-container > .x-column {
	height: auto !important;
    float: none;
    -ms-flex-flow: column wrap;
        flex-flow: column wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

Code Above will take care of both green boxes and the footer ones. Thank you.