Pricing table sizing

Support
#1

Hi there,

I’ve created a pricing table but I’ve noticed that each column changes size based on the amount of information in it, resulting in the bottom of the overall table being uneven. Is it possible to prevent this and to have each of the columns a set size? (I’d like the all of the columns to end at the same point, even if that means a gap after the information in one or more of the columns)

My website link is http://special-song.com/?ign_skip=8zzN6Vzf9WY9NCf
Please click on the ‘pricing’ option in the menu to see what I mean.

Many thanks

#2

Hi There,

Thank you for writing in, we can do that with a custom CSS, first we need to get the height of the tallest cell which I believe is the 4th row on the 3rd column, that is 135px.

Then lets have a custom CSS that will apply a minimum height 135px on all cell. To do this, please assign a CLASS to your Pricing Table element (lets say class mytable). Then write your custom CSS something like this:

@media (min-width: 768px) {
	.mytable .x-pricing-column-info ul>li {
		min-height: 135px;
	}
}

The @media (min-width: 768px) there, is to make sure that this will only applied on desktop screen, not on mobile.

Hope it helps,
Cheers!

#3

This worked perfectly, thank you

#4

You are most welcome. :slight_smile: