Alignment of Pricing Table

[HMR2017]

Hi,

How can I left-align the first column of the pricing table only?

I want the other columns to all align-center as they currently are but for the header and detail in the first left column to be left aligned.

Also - how is it possible to set a % width to this column and then have the remaining columns a different width?

I’d also like to know how I can reduce the height of each row, remove/hide the interval row, and at the bottom of each pricing table there appears to be a blank row - how can this be removed?

Thanks

[lely]

Hi @HMR2017

It is possible using custom CSS. Those settings are already defined on the stacks CSS. The following guide can help you inspect current styled attached to the elements

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

See this sample: https://screencast-o-matic.com/watch/cYV3IevL4y

.x-pricing-table .x-pricing-column:not(:first-of-type) h2 {
    text-align: left; /*Align left the headers*/
}
.x-pricing-table .x-pricing-column:first-of-type ul li {
    text-align: left; /*Align left first column content. Please remove the other CSS that align everything to left*/
}
/*Adjust size*/
.x-pricing-table.five-columns .x-pricing-column:first-of-type {
    width: 30%; /*First column size*/
}
.x-pricing-table.five-columns .x-pricing-column {
    width: 17.5%; /* Succeeding columns size*/
}

All of this CSS is a sample on how to achieve it but total changes is outside the scope of our support. Please check the guide provided.

You can check this online guide about CSS.

[HMR2017]

That worked perfectly - thank you for your help

[ruenel]

You’re welcome!
We’re glad @Lely were able to help you out.