[Tobias GParticipant]

hey guys, I have been using the x theme quite a while..

AND IT IS GLORIOUS!

So here is the issue for I cant seem to find a solution for:
To have a little space between my pricing columns for better readability, I’ve put them in 3 rows. Here is a screenie:

unfortunately this makes the pricing table go nuts when I adjust the size of my browser. at the size for “phone” visibility, everything is neatly ordered, one column on top of the next.

on “tablet” visibilty, I would expect the pricing table to show only 2 of the 3 displayed options, having the third one appear below. Like in the shortcode example.
So what I want is this: Show 3 columns as long as there is enough room for the text to be displayed within the broder of the column, then have 2 columns neatly ordered and the third one down below, and so son.
Basically I want it to work like in the shortcode example.

I have another screenshot for you but BEWARE, it is as ugly as my face which is why I became a computer guy 🙂

[Tobias GParticipant]

http://www.lootraider.de

[AlexanderKeymaster]

Hi Tobias,

Thanks for the info, and the screenshots! Can you try changing your page to a single row containing the three pricing table columns? You don’t need to add standard columns in Visual Composer. The pricing table should just be in a single row, and it will set up it’s own columns.

Take a look at the tutorial video: http://theme.co/x/member/kb/shortcode-walkthrough-pricing-table/

Around (5:10) you can see how the columns look within visual composer.

[Tobias GParticipant]

Thanks for your answer!

Yes, that is exactly how I had it before. But the thing is, it really looks better with space inbetween each column.
Without it, the readability suffers a lot!

Just check it out for yourself:

no space:

space:

The second picture is just so much more beautiful. I would be open for any other design suggestions you might have in case it doesnt work how I want it to.

I’m looking forward to your answer!

[SupportMember]

Hi there!

Thank you for the info.

Please use this on Customizer > Custom > CSS to increase the width of the pricing column for mobile devices:

@media (max-width: 979px) {
.x-pricing-table[class*="-column"] .x-pricing-column {
width: 100%;
}
}

I hope that helps. Cheers!

[Tobias GParticipant]

I tried, the code didn’t change anything.
You can reproduce the failure by opening the website and playing with the size of your browser!

Do you have any other code that might work?

[AlexanderKeymaster]

Hi Tobias,

These gaps are hard to maintain while also keeping the columns responsive. You can use this CSS workaround though:

.x-pricing-column {
border-right: 12px solid transparent;
border-left: 12px solid transparent;
}
.x-pricing-column.featured { box-shadow:none; }

[Tobias GParticipant]

Yeah I know, that’s why I’m writing in. Just adding a border is plain ugly, also I would have to get rid of the box shadow of all 3 columns.
So I decided I’d rather have the box shadow + responsive instead of the (fake) gap + responsive.
What I wanted was box shadow + gap + responsive.

Anyhow, thanks a lot for your effort, even though it didn’t work out as planned.
At least the solution I have now is something I can live with:

[SupportMember]

Hi there!

Thank you for the update. You can add a padding or gap between the columns using this:

.x-pricing-table.three-columns .x-pricing-column {
width: 33.33333%;
padding: 0 20px;
}

body .x-pricing-column {
box-shadow: none;
}

The code suggested above should prevent the issue on the first screenshot that you posted:

@media (max-width: 979px) {
.x-pricing-table[class*="-column"] .x-pricing-column {
width: 100%;
}
}

Cheers!

[Tobias GParticipant]

Hi!

Unfortunately, it does not. Thanks anyway! If you read my post carefully, I state that I want

boxshadow + gap + responsive

What you offer is:

gap + responsive << even though the extra gap destroys the ability to be responsive anyway, it looks just as ugly as without the gap and having the pricing columns in extra rows like 1/3 1/3 1/3.
Believe me I have tried every code you gave me and could easily post another screenshot,
this is what the code does:

still not responsive also no boxshadow + even uglier than what I had in the beginning 😀

[RadModerator]

Hi Tobias,

How about this.

The idea is if you will need extra gap, then you will need to reduce its width too.

Example, three column has 33% width. And we need 1.5% on left and right.

33% – 1.5% x 2 = 30%

And its css will be :

.x-pricing-table.three-columns .x-pricing-column {
width: 30%;
margin-left: 1.5%;
margin-right: 1.5%;
}

Hope this helps.

[Clement LParticipant]

That helped me!!

Thanks!

[Clement LParticipant]

Ho no! It’s not responsive:( Only the third column is..

Would you have any solution to that by any chance?

[RadModerator]

Hi Clement,

Weird, I just tried on your site and it works.

Could you perhaps use this, instead of that one.

@media (min-width:980px) {
.x-pricing-table.three-columns .x-pricing-column {
width: 30%!important;
margin-left: 1.5%!important;
margin-right: 1.5%!important;
}
}

Thank you.

[Clement LParticipant]

Oh My!

Almost 6 months later and I find your answer.. Thank you very much, it works great!

[Author]

Posts