HI. I'd like to add a sixth column to my pricing table, but when I try to, the whole table narrows to maybe 2/3 of the width of the column. I see this in style.css:
.pricing-table.six-cols > div { width: 16.5%; }
So it looks like maybe it could work. Can you help?
It worked, thanks! I bumped it up to 16.5 to get a little more width.
With all the columns being the same width, some columns have a lot of space around them, while other are very tight. Is there a way to adjust the width of each column in a pricing table separately?
Terrific, thanks! The spacing issue had been bugging me.
One more thing. ;-) I just now noticed that the non-highlighted rows don't quite line up with the highlighted rows. I'm pretty sure they used to, and these width changes aren't at fault.
Hi. The rows align in FF30, IE10, IE11, and Chrome—all the browsers I have, so that's great. But I was setting the widths of the columns individually to minimize wrapping, and this change made them all the same width again. I have the following code in my child theme. How can we make your fix while letting me set each column width? Thanks. Hope you had a happy Fourth.
I logged back in and remove the css I had added for that mod - I also checked your child theme css and found a css error of an extra bracket which could've been causing the cross browser issues. How are things looking on your end now?
But the non-highlighted rows are still slightly misaligned from the highlighted rows. I found out that the problem is caused by the line height setting in my child theme's CSS below. If I make it 28px, the rows align, but I don't want that much line spacing everywhere, so maybe the pricing table h3 can be excluded?
html body h3,html .row .col h3,html .toggle h3 a { font-size: 18px!important; line-height: 28px!important; }
HI. I'd like to add a sixth column to my pricing table, but when I try to, the whole table narrows to maybe 2/3 of the width of the column. I see this in style.css:
.pricing-table.six-cols > div { width: 16.5%; }
So it looks like maybe it could work. Can you help?
Thanks!
Hey John!
This would require modifying the css . Can you please provide page link so we can take a look.
Thanks
ThemeNectar Support Team
Add this into the Custom CSS box located in your Salient Options panel Or on the Visual Composer Css button so the css shows on that page only:
.pricing-table div.pricing-column { width: 16%; } <br>Cheers
ThemeNectar Support Team
It worked, thanks! I bumped it up to 16.5 to get a little more width.
With all the columns being the same width, some columns have a lot of space around them, while other are very tight. Is there a way to adjust the width of each column in a pricing table separately?
Sure, Use the nth-child CSs selector like this:
.pricing-table div.pricing-column:nth-child(1){ width: 16%; }
Cheers
ThemeNectar Support Team
Terrific, thanks! The spacing issue had been bugging me.
One more thing. ;-) I just now noticed that the non-highlighted rows don't quite line up with the highlighted rows. I'm pretty sure they used to, and these width changes aren't at fault.
It seems to be alright ?.
-T
ThemeNectar Support Team
Hey John!
Anyway you could provide me with admin credentials so I could play with this for you to see if I can sort out the cross broswer issues with the mod?
Cheers :)
Hey again!
How's it looking on your end now?
Hi. The rows align in FF30, IE10, IE11, and Chrome—all the browsers I have, so that's great. But I was setting the widths of the columns individually to minimize wrapping, and this change made them all the same width again. I have the following code in my child theme. How can we make your fix while letting me set each column width? Thanks. Hope you had a happy Fourth.
.pricing-table div.pricing-column:nth-child(1){
width: 15%;
}
.pricing-table div.pricing-column:nth-child(2){
width: 14.5%;
}
.pricing-table div.pricing-column:nth-child(3){
width: 12%;
}
.pricing-table div.pricing-column:nth-child(4){
width: 19%;
}
.pricing-table div.pricing-column:nth-child(5){
width: 15%;
}
.pricing-table div.pricing-column:nth-child(6){
width: 21%;
}
Hey again!
I logged back in and remove the css I had added for that mod - I also checked your child theme css and found a css error of an extra bracket which could've been causing the cross browser issues. How are things looking on your end now?
Cheers
Doh! I'm sorry. It looks terrific now, thank you very much! And for Salient.
Well, I spoke too soon. The widths are fine.
But the non-highlighted rows are still slightly misaligned from the highlighted rows. I found out that the problem is caused by the line height setting in my child theme's CSS below. If I make it 28px, the rows align, but I don't want that much line spacing everywhere, so maybe the pricing table h3 can be excluded?
html body h3,html .row .col h3,html .toggle h3 a {
font-size: 18px!important;
line-height: 28px!important;
}
Thanks again!
Hey again
You could use this to reset the pricing table h3's to the normal height while keeping your mod in place:html body .pricing-table .pricing-column > h3 { line-height: 28px !important; }Thanks, Nectar! That did it.