Code to keep Pricing Table columns same size

[innovatefast]

Hi,

Is there a CSS code that allows me to keep ALL pricing table columns at a certain height px?

Thanks!

[ruenel]

Hello There,

Thanks for writing in!

To resolve your issue, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-pricing-column-info {
    min-height: 458px;
}

Feel free to adjust the minimum height which is the actual height of the longer table column in your price table.

Hope this helps.

[innovatefast]

Hi RueNel,

I’m having trouble getting the top 2 pricing tables to be even regardless of what device they’re viewed on.
But I also need the 3 bottom columns to stay how they are.

The link is: iowaiv.com/services

I used the code above, but I forgot it would interfere with the bottom columns too.

Thanks

[jade]

Hi there,

You may make use of the JS code suggested here:

Use Flex Layout | Themeco Docs

So what you can do it to target the content of area of each pricing table and set the height to the longest content so that they will all be balanced.

Please try this in the Global JS:

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

Hope this helps.