Equal Height Columns

[InsideOutDesign]

Hello,

Thanks again for your terrific support! I was searching the forum to solve my problem and stumbled across the Code Snippet - Make All Columns Equal Height, but unfortunately the solution is not working for me. I have two places in which I need assistance in this area, on the homepage and our downloads page. I have attached photos of the issue below and was hoping you would be able to point me in the right direction to mitigate the issue!

Thanks!

[basanta]

Hi There,

Thanks for writing in!

The reference code snippet should work as expected. Can you please send us your page URL where you have created the column and the login details in a secure note to help you on thj\is.

Thanks

[InsideOutDesign]

Thanks for the response and you guys taking the time to look into things for me! I have gone ahead and attached a secure note above, was also wondering if on the first image it would be possible to make to whole block a clickable area, any information would be greatly appreciated!

[jade]

Hi there,

Please add a class to the columns that you want to be displayed with equal height then try this code in the custom JS panel:

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

Use the class equal-column to the columns.

Hope this helps.

[InsideOutDesign]

Looks great! Thank you for the quick fix! Intern the buttons are not aligning at the bottom of the column, as well it seems when scaling the site down, the elements inside (text, images, buttons) flow outside of the column. Do you know what may be causing this issue?

[jade]

Hi there,

The code above will get the height of the longest column and set it to the rest of the columns. It will not change the alignment of the button. If you want the buttons to be aligned, you might want to try a different approach where you set all the common elements of the columns have equal height but this would be tricky to implement using JavaScript although it’s not impossible. Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[InsideOutDesign]

Not a problem! I will work on aligning the buttons myself, but is the text and such overflowing outside of the columns a customizable fix, or is that something you could help me with at least?

[christopher]

Hi there,

I have another suggestion that might be of a help. Kindly remove the snippet code all together and add the code below to X > Launch > Options > CSS:

.sameheight.x-container {
	display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.sameheight.x-container .x-column {
	display: flex;
    flex-flow: column wrap;
}

.sameheight.x-container .button-bottom {
    margin-top: auto;
}

The code above assumes that you have the sameheight class added to the section in question:

That should fix the issue you are experiencing and have same height column without the height restriction.

Thank you.

[InsideOutDesign]

Worked like a charm! Reformatted things and it is keeping everything in the boxes very nicely, one last request if it wouldn’t be too much trouble! I was wondering if there is a way to make the entire featured box a clickable link. I’ve seen others on the forum troubling with similar requests and was wondering if there was a way to do so?

[christopher]

Hi there,

Glad that we could be of a help For the additional question:

Please add the Javascript code below to X > Launch > Options > JS :

jQuery('.sameheight.x-column').on('click', function(event) {
	var theLink = jQuery(this).find('.x-feature-box-text a').attr('href');
	window.location.href = theLink; 
});

and add the CSS code below to X > Launch > Options > CSS:

.sameheight.x-column {
    cursor: pointer;
}

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

[mickna]

Hi there,

same problem here.
What I did (works in chrome, other browsers have to check):

• Select the row
• under “Style” insert:
  display: flex; flex-wrap: wrap;

May this helps someone.
Thanks

[Joao]

Thank you for the input!

[InsideOutDesign]

Hate to open this topic back up again, but after further review the solution above has worked for Chrome and IE, but for some reason stacks when loading the page in Safari… Not exactly sure what would have caused this!

[christopher]

Hi there,

I am not sure which section you are talking about. I checked the section that we already suggested the code for and it is working ok on Safari:

You need to make sure your Safari browser is 11+. If you are experiencing the problem for the other part please open up a separate thread and we will do our best to help you there.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.