New Landing › How can we help? › Themeforest Theme Support › Dante › Pricing table rows not lining up…

Viewing 15 posts - 1 through 15 (of 17 total)
1 2
  • Back to forum
    Posted in: Dante
  • March 24, 2014 at 6:05 am #60100
    mgma
    Member
    Post count: 136

    Hi guys-

    How can I make the rows within a pricing table line up horizontally? So that if one column in that row has more copy, the whole row becomes deeper…. the only way the table will stay lined up?

    See the attached example…

    You’ll see the first row under “Type of User”… the last column has copy that breaks into a second line… but the rest of the row doesn’t adjust accordingly. I made the first column deeper with grek copy…. but what is a better way to make sure these rows, no matter how deep they are, stay lined up?

    Thanks!!

    March 24, 2014 at 11:07 am #60232
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    You can’t change the size of rows depending on if it has more text in, the only way you could line them up is with custom css. If you send me a link I can help you with this.

    – Kyle

    March 25, 2014 at 7:00 am #60531
    mgma
    Member
    Post count: 136

    Thanks Kyle. here’s the page example. There will be a couple like this…

    http://mcalpin.net/spatialpoint/2014/desktop/

    I want to do away with the pricing row at the top, and then somehow make sure all the rows stay lined up as the length op copy differes from cell to cell…

    Thank you~

    March 25, 2014 at 9:28 am #60605
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    It’s pretty hard work, you have to target each row that needs to be bigger to line up with each other, it would be something like:

    .pricing-table-row:nth-child(6), .pricing-table-row:nth-child(14), .pricing-table-row:nth-child(18) {
  min-height: 65px;
}

    However you need to repeat it for quite a few of your rows.

    Do you have css knowledge?

    – Kyle

    March 25, 2014 at 9:48 pm #60964
    mgma
    Member
    Post count: 136

    Sure… will give it a try. Is this all I need? Will the “nth-child(6)” be recognized, etc.?

    Thanks Kyle

    March 26, 2014 at 9:19 am #61115
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Yes the code is:

    .pricing-table-row:nth-child(6)

    Change the number 6 to the number of the row you need to change, please be aware that you have hidden some rows, so you will need to check the source code to see which number div it is.

    – Kyle

    March 26, 2014 at 9:21 am #61119
    mgma
    Member
    Post count: 136

    Thanks Kyle… will give it a go…

    March 26, 2014 at 10:20 am #61144
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    No problem

    – Kyle

    March 27, 2014 at 6:19 am #61469
    mgma
    Member
    Post count: 136

    Hi Kyle. I’m trying this, but it doesn’t effect the far left column… the other 3 columns line up, but not the far left description column. Is there different code I need to add to include this column?

    Thanks!

    March 27, 2014 at 9:36 am #61535
    Melanie – SUPPORT
    Member
    Post count: 11032

    Hi, how would you like the far left column to line up? I don’t think it can line up since the rows have a different height than the other columns’ rows. :/

    March 27, 2014 at 9:36 am #61536
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Sorry should of mentioned that, yes that class for this row is

    .pricing-table-label-row

    so:

    .pricing-table-label-row:nth-child(6) {
  min-height: 65px;
}

    – Kyle

    March 27, 2014 at 8:11 pm #61869
    mgma
    Member
    Post count: 136

    Not sure if I’m communicating this properly. How would this setup be useful at all UNLESS the rows lined up? I’m not understanding your comment Melanie. Is this shortcode only meant for cells that have a word or two in them?

    And even though I can manually make this happen now with this CSS… then at different media queries it falls apart. A word breaks to the next line and that’s it… all out of alignment again.

    Thanks

    March 27, 2014 at 8:13 pm #61870
    mgma
    Member
    Post count: 136

    I guess next question would be… if I use a regular table then… how can I control the width ofthe columns. Again… with an inconsistent amount of copy in any given cell, they kindof go all over the place width wise now. How can I make the columns of a 4 column table fixed at 25%, for instance…

    Thanks!

    March 28, 2014 at 9:45 am #61991
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    To determine the width of the columns it will be a similar thing:

    .pricing-table-column:nth-child(2) {
  width: 25%;
}

    I will let the developer know about this and see if there’s a way we could improve the pricing tables in a future update.

    – Kyle

    July 25, 2014 at 2:41 pm #94761
    GlowTouch
    Member
    Post count: 2

    Has there been any development in improving this component of the pricing tables? We are running into the same issue.

    Thanks!

  • Back to forum
    Posted in: Dante
Viewing 15 posts - 1 through 15 (of 17 total)
1 2

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register