Layout of Pricing table

[Mesh]

Hi there,

How do I achieve this look of the app demo? The classic pricing table has a long column. I’d prefer the plans to be side by side. Please help! Thank you in advance.

[paul.r]

Hi,

To make it side by side, you can add this in Theme Options > CSS(Global CSS)

.x-pricing-column.featured {
   margin-top:0;
}

.x-pricing-column h2 {
    min-height: 100px;
}

.x-pricing-column-info .x-pricing-column.featured .x-btn.x-btn-x-large {
   font-size: 16px;
    padding: 0.563em 1.125em 0.813em;
}

.x-pricing-column.featured .x-pricing-column-info ul {
    margin: 15px 0 25px;
}

.x-pricing-column.featured .x-pricing-column-info {
    padding-bottom: 28px;
}

Hope that helps.

[Mesh]

It did! Thank you! How do I change the background color of the heading text of the second column i.e. Standard ? Do it have to give it an ID?

[friech]

Hi There,

It will automatically have a background-color if you set that plan to be a featured column.

Then if you need it to change to a specific color, use the custom CSS below, add it to Theme Options > CSS

.x-pricing-column.featured h2 {
	background-color: tomato;
}

Cheers!