Pricing table rows not lining up…

[mgma]

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!!

[Kyle – SUPPORT]

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

[mgma]

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~

[Kyle – SUPPORT]

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

[mgma]

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

Thanks Kyle

[Kyle – SUPPORT]

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

[mgma]

Thanks Kyle… will give it a go…

[Kyle – SUPPORT]

No problem

– Kyle

[mgma]

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!

[Melanie – SUPPORT]

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. :/

[Kyle – SUPPORT]

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

[mgma]

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

[mgma]

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!

[Kyle – SUPPORT]

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

[GlowTouch]

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

Thanks!