Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 11, 2015 at 11:11 am #501529
    ac

    Hi, i’ve put together a pricing table, but the styling on it isn’t looking great. How can I improve this. I think I need smaller text in the first column and then equal row heights. Also, the $ sign is in black, even though the prices are in white.

    Just doesn’t look great and I can’t find options for improving it and making it look nice. Link posted below.

    I tried the default table design but that wasn’t as good.

    Thanks for your help.

    September 11, 2015 at 5:01 pm #501788
    Elliott

    Hi andrea!

    Add this to a codeblock element to get equal line heights and all text black.

    <style type = "text/css">.pricing-table > li:nth-child(5) {
  min-height: 85px;
}
#top .pricing-table li {
  color: black;
}
#top .pricing-table .avia-heading-row {
  color: white;
}
</style>

    Regards,
    Elliott

    September 11, 2015 at 5:01 pm #501789
    ac

    I have made it look better by using the default row setting rather than the pricing row setting and I’ve put the row with uneven content at the bottom.
    Can I get a bit of custom code to make the last row only a specific height please.

    September 11, 2015 at 5:14 pm #501801
    Andy

    Hey!

    try this:

    .avia-pricing-table-container .pricing-table>li:last-child {
height: 100px;
}

    Cheers!
    Andy

    September 11, 2015 at 6:34 pm #501852
    ac

    Sorry Andy, that hasn’t changed anything – i’ve put it up to height 500px and not made any difference.

    September 13, 2015 at 2:37 pm #502309
    Elliott

    Hey!

    Can I get a bit of custom code to make the last row only a specific height please.

    That is what the first line in my previous code does.

    .pricing-table > li:nth-child(5) {
  min-height: 85px;
}

    Change the 85px to whatever you need to change it’s height.

    Cheers!
    Elliott

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.