This latest cornerstone update has changed the alignment of my 2 column pricing column. It won’t centre align - it seems to think there is a third column and if you try and rearrange the content, it replaces it all together with the template version. Clearly a bug and short code doesn’t override this (stating 2 columns).
Can you help please?
Still having issues with this and more people have added since saying they have the same issue. I’ve tried everything - manually changing the width under ‘style’, adding short code, updating the CSS… none of it is working. When I inspect the element, it says it’s defaulting to float left, which isn’t set as this from the front-end… is anybody there to answer, it’s an issue for a lot of customers…
Hi There,
We are extremely sorry that you are facing the issue.
To help you on this can you please provide us the login details of your website in a Secure note, so that we will have a closer look on to the issue. If it is a common issue we will keep in mind for next release.
Thanks and we appreciates your patience.
Thanks, have done so.
Hi There,
The details you have sent is not working for me.
Can you please check and resend it.
Thanks
Have done this - can you help?
There are many posts asking about this now - not clear why you’re not responding to any of them fully? I don’t mind if it’s a bug that needs fixing, I just want the correct CSS to override it in the meantime.
When you inspect the element, it says ‘.x-pricing-table.cf.three-columns’ - how do I override this please?
Hi there,
We are sorry for our late reply, we have a heavy traffic after the latest release of our theme as it is a major one and we suspect this traffic will go on for 1-2 weeks.
I appreciate that you wait till one of our support staff get back to you, cause if you add another reply it will go to the end of the long queue which we have right now.
I do not know why this is happening for you but as a temporary solution kindly add the code below to X > Launch > Options > CSS:
.x-pricing-table.three-columns .x-pricing-column {
width: 50%;
}
Thank you for your patience and understanding.
Hi @christopher.amirian That css doesn’t work.
Hi There,
Yup, I can confirm that this is a bug. Here’s a quick fix for now. Add the Custom CSS below on your page CSS.
.x-pricing-table.two-columns .x-pricing-column {
width: 50% !important;
}
Then add a class two-columns on your Pricing table element
Sorry for the inconvenience,
Bye the way, I saw 2 Raw content element with an incomplete [pricing_table] shortcode on top your Pricing table element, I’m not sure what are those for but please remove it, as they might mess up the table element markup.
Thanks,
Hi - that CSS doesn’t work on mobile.
Hey there,
If you want the pricing table to be full width in mobile devices, then you should use this code instead:
@media screen and (min-width: 768px) {
body .x-pricing-table.two-columns .x-pricing-column {
width: 50% !important;
}
}
Hope this helps!
Nope, that makes one column 50% of the screen and the other 100% (on mobile)… When is this being fixed please?
If anybody else is struggling with this (after 2 weeks of dark space and losing brain cells, plus customers), I found this combo worked for me on both desktop and mobile:
.x-pricing-table.two-columns .x-pricing-column {
width: 100% !important;
}
@media screen and (min-width: 768px) {
.x-pricing-table.two-columns .x-pricing-column {
width: 50% !important;
}
}
Adding a class “two-columns” in your pricing table element.
Glad you’ve sorted it out and thank you for sharing with us.
Cheers!
Thanks for your code @siobanh if you have a four column pricing table on your desktop version and want to have full width on the mobile version the CSS should look like this (managed to figure that out because of your code @SiobhanH) .x-pricing-table.three-columns .x-pricing-column {
width: 100%;
}
@media screen and (min-width: 768px) {
.x-pricing-table.three-columns .x-pricing-column {
width: 25% !important;
}
}