Pricing Table Cell Margins

Support
#1

Hello, I am using the Pricing Table element and when they stack for smaller screens they kind of run together. Can you please tell me what class I need to be editing to add a little space between them?

Thank you.

#2

Hi there,

Thanks for writing around! Please add the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

@media screen and (max-width: 767px) {
    .x-pricing-table[class*="-column"] .x-pricing-column {
        margin-bottom: 40px;
    }
}

Let us know how this goes!

#3

Perfect! Thank you!

#4

You’re welcome.

#5

Hello, I thought that fix worked for me but I’m experiencing some things I don’t understand. For example, on the page http://dev.playamobility.com/price-block/ you can see that I have a 6 space pricing table that displays fine on widescreen but when it flips vertical for mobile, I don’t have the margins from adding the CSS code suggested. Further, I have saved that pricing table as a template block but when I add it to a page it’s alignment is all off (see the very bottom of http://dev.playamobility.com/playa-del-carmen-mobility-scooter-rental/gogo-elite-traveler/). Please advise and thanks in advance.

#6

Hi again,

Please replace the previous code with this one:

@media screen and (max-width: 767px) {
    .x-pricing-table .x-pricing-column {
        margin-bottom: 40px;
    }
}

I checked the pricing table and it looks fine on my end, however one thing I noticed is that you’ve made all columns Featured column, please fix this and this may help you in fixing the alignment issues you’re having.

Let us know how this goes!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.