Pricing table row heights

[FloatingLime]

Hi there,

Please can you tell me how I set the row heights for my pricing tables.

Differing amount of text is causing weirdness!

http://www.floatinglimemedia.com/prices/

Thanks

Lara

[wilsongrouplp]

As far as I know (from reading another post on the topic and wanting the answer myself) there isn’t a way to set the height of the rows in the pricing tables. My solution for adding spacing was to make a 1 PX translucent (no color) .png that I add in where I need it. I have another that’s 10 PX. I know it’s not the greatest fix ever, and it will add space on a mobile version, but aside from that their only other fix was to suggest that you go and have someone custom code jquery. (As per this post: http://support.swiftideas.net/forums/topic/pricing-table-misalignment/ )

Hopefully they’ll get back to you! I should note I’m not the official support or anything, just been having that issue myself.

I attached the spacers that I made, not sure if you can download them or not. And I know it’s not really “proper” coding, but adding CSS for some spacing things in WordPress is just annoying. 😀

[Swift Ideas – Ed]

Hi there,

Try this custom css:

.pricing-table-column.label-column .pricing-table-label-row:first-child {
height: 132px;
}

– Ed

[FloatingLime]

Hi Guys,

Thanks for the help. As always apologies for the delay in getting back to you – I don’t get to work on this nearly as often as I’d like.

Sadly the custom CSS did nothing, so I will now try the spacer idea. I’ll let you know how I get on.

Regards

Lara

[FloatingLime]

Thanks for the help – but still no joy!

Thinking of abandoning this and just using a standard table where at least a row will be the same height across the row i.e. the maximum height!

[Ben – SUPPORT]

I’ve just had a look at the website and to me all the table heights seem to be the right height? Am I missing something?

Cheers
-Ben

[FloatingLime]

Hi Ben – thanks for getting back to me – they are all the right height now.

I have added text on the lines below and have coloured then slightly lighter than the background.

I know Google used to really penalise you for this as proof that you were trying to hide something / cheat the system.

I’m just hoping it doesn’t happen to me as I couldn’t find anything else to work.

[wilsongrouplp]

I had success using this code for this. It’s a bit complicated, but it also addresses all the responsive stages. There’s four different height levels for the different responsive stages. You may find you don’t need that many, I’ve just included everything you may need. There’s also a way to adjust how far down (or up) the label column on the left hand side is, just incase something has gotten off. The heights don’t really mean anything in this yet. You’ll need to adjust them for your own code accordingly.


/* For screen widths over 1200px */
@media only screen and (min-width: 1200px)
{
/* This first line is optional. If playing with the heights of the other items somehow messes up where your pricing table row falls vertically, you can use this css to correct that. */
.labelled-pricing-table .pricing-table-column.label-column {margin-top: 100px !important;}
/* This line handles the label column on the left */
.labelled-pricing-table .label-column .pricing-table-label-row {max-height: 65px; height: 65px;}
/* Next line handles the highlighted rows */
.labelled-pricing-table .alt-row {max-height: 65px; height: 65px;}
/* Last line handles the */
.labelled-pricing-table .pricing-table-row {max-height: 65px; height: 65px;}
}

/* For screen widths between 979 and 1200 */
@media only screen and (max-width: 1199px) and (min-width: 979px)
{
/* This first line is optional. If playing with the heights of the other items somehow messes up where your pricing table row falls vertically, you can use this css to correct that. */
.labelled-pricing-table .pricing-table-column.label-column {margin-top: 100px !important;}
/* This line handles the label column on the left */
.labelled-pricing-table .label-column .pricing-table-label-row {max-height: 65px; height: 65px;}
/* Next line handles the highlighted rows */
.labelled-pricing-table .alt-row {max-height: 65px; height: 65px;}
/* Last line handles the */
.labelled-pricing-table .pricing-table-row {max-height: 65px; height: 65px;}
}
/* For screen widths between 768 and 979 */
@media only screen and (max-width: 979px) and (min-width: 768px)
{
/* This first line is optional. If playing with the heights of the other items somehow messes up where your pricing table row falls vertically, you can use this css to correct that. */
.labelled-pricing-table .pricing-table-column.label-column {margin-top: 100px !important;}
/* This line handles the label column on the left */
.labelled-pricing-table .label-column .pricing-table-label-row {max-height: 65px; height: 65px;}
/* Next line handles the highlighted rows */
.labelled-pricing-table .alt-row {max-height: 65px; height: 65px;}
/* Last line handles the */
.labelled-pricing-table .pricing-table-row {max-height: 65px; height: 65px;}
}
/* For screen widths under 768 */
@media only screen and (max-width: 768px)
{
/* This first line is optional. If playing with the heights of the other items somehow messes up where your pricing table row falls vertically, you can use this css to correct that. */
.labelled-pricing-table .pricing-table-column.label-column {margin-top: 100px !important;}
/* This line handles the label column on the left */
.labelled-pricing-table .label-column .pricing-table-label-row {max-height: 65px; height: 65px;}
/* Next line handles the highlighted rows */
.labelled-pricing-table .alt-row {max-height: 65px; height: 65px;}
/* Last line handles the */
.labelled-pricing-table .pricing-table-row {max-height: 65px; height: 65px;}
}


[wilsongrouplp]

I should note too that the above code will make *everything* the same height, not just one row. I would suggest maybe for your situation, you move the pricing and the name of the package into the same box on the top row, then put the description in the next box down, then use the code I gave to adjust how far down the label column needs to be.

I’d also suggest taking a look at how your columns look when you scale the window of your browser smaller, as there’s some odd alignment going on there that my code could fix. 🙂

PS. Obviously you’re welcome to go about this project however you like. I’m just trying to make suggestions that will work within the theme. 🙂

[FloatingLime]

Hi Wilson Group,

Thank you so much for spending time on this. I really appreciate all the effort you’ve gone to!

I am going to try your solution as soon as I get round to it, as it is a long way from perfect as you have noticed, and I really would like to get this right!

So many thanks again for your input.

All the best

Lara