New X & Cornerstone = Pricing Column Issues

Support
#1

Hey Guys,

Since the recent updates, I’ve been having some issues. The current one that I could really use your help with is regarding pricing columns. Pricing columns no longer display correctly. It’s almost like Cornerstone is forcing a three-column pricing layout into a one-column space, although the pricing column element is actually made up of only one column. This results into a ridiculously skinny pricing column.

Private details to follow.

Many thanks!

#2

Hello @scoopsdad,

Thanks for asking and we are sorry that you had to face this problem.

Upon logging into the website frontend I could see that pricing table was using 3 column layout. I went ahead and checked the page in Cornerstone and have resolved the issue for you by changing the column layout. I request you to please check at your end and let us know the feedback.

Thanks.

#3

Hello and thanks for your reply.

Unfortunately, that didn’t actually solve the issue and I’m not too sure you understood the problem.

The pricing table itself is not using a 3-column layout. The pricing table element is inside of the first of 3 columns within the row. The 2nd and 3rd columns include text and graphics.

When you turned the 3 column row into a 1 column row, I lost the 2nd and 3rd columns of content which completely changes the entire design and layout of the page.

If you look at the other pages noted in the secure note, you will see that the pricing table element used to display just fine being inside of a 3 column row.

Thanks!

#4

Thanks to the 2.1.1 update, I was able to fix this issue by adding width:100% to the pricing table’s style field.

1 Like
#5

Thanks @scoopsdad - this has been driving me bonkers for hours…

#6

You’re so very welcome, @SiobhanH. It was frustrating the crap out of me, too!

1 Like
#7

Thank you!

#8

I’m having this same issue on an existing client site on X5.2.2

an existing 2 column pricing table is defaulting to a 3 column pricing table, and I have had to override the css to fix the issue…

here is a screenshot of the problem and also the ‘inspect’ showing the 3 columns

#9

Hi @scotbaston - do you mind sharing what css override you used for this?

#10

Probably not the best solution but at least it works for my case

.x-pricing-table.three-columns {
width: 50%;
}

I put this on the on page css, and just to note that if you have a 3 column pricing table, this will mess that up

hope that helps

#11

Ace, thanks so much - will give it a try.

#12

Let us know how it goes,

We have already reported the issue to our developers.

Cheers

1 Like
#13

Having the same problem. 2 column pricing table is showing as 3, and the above page CSS doesn’t fix it.

quick hack. add:

width:50%;

to the style for each column

#14

Hi There,

Here’s a temporary fix that won’t affect the other tables. For the two column table, please add the following custom CSS on Theme Options > CSS

/*temporary fix for two columns pricing table*/
@media (min-width: 768px) {
	.x-pricing-table.two-columns .x-pricing-column {
    	width: 50% !important;
	}
}

Then add a CLASS two-columns to your Pricing table element (https://prnt.sc/gwixm5)

For the four columns table use the following custom CSS instead.

/*temporary fix for four columns pricing table*/
@media (min-width: 768px) {
	.x-pricing-table.four-columns .x-pricing-column {
	    width: 25% !important;
	}
}

And add a CLASS four-columns to your Pricing table element.

Note: Please remove this temporary fix when the official fix is release since this can cause a CSS conflict on the pricing table element.

Hope it helps,
Cheers!