Docs

[creativetoast]

hi,
Thanks for the awesome theme.
I’m trying to give it some padding between the columns (8px on both sides of each column), but now that pushes my last column down to the next line.
could you please show me how I can fix the sizing problem so that the table can be responsive and all columns fit on 1 row?

Thank you very much in advance

[creativetoast]

This reply has been marked as private.

[creativetoast]

hi,
It took me a while to figure out the temporary solution to that. so I played around with the numbers
.x-pricing-column {
margin-right: 8px;
margin-left: 8px;
max-width: 284px;}

However I still have some 2 issues:
– The sizing only displayed correctly on certain screen size (monitors) and on ipad horizontal the last column still jumps to next line. Is there a way that I could make it responsive and have all columns always on the same row (except on cellphone screen size)
– right now the whole pricing table is aligned left. how can I make it float to the middle?

hope you can shed some light on these.

Thanks in advance,

[Rue Nel]

Hello There,

Thanks for the updates. To resolve this issue, please have your code updated and make use of this code instead:

.x-pricing-table.four-columns .x-pricing-column {
    margin-right: 8px;
    margin-left: 8px;
    width: calc(25% - 16px);
    max-width: 284px;
}

We have 25% minus 16 pixels since you want to add a left and right margin. Hope this helps.

[creativetoast]

wow, one extra line of css solves all my problem. You’re a genius. Thank you very much!!!

[creativetoast]

oops actually, it doesnt display correctly on mobile. is there a way to fix the responsiveness on mobile?

and plus everything is still align left, how can I center the columns on mobile?

it’s perfect on computer screens now btw.

[Rue Nel]

Hello There,

To make sure that the css will only affect the desktop screens and still looks good on mobile screens, please have the code updated and use this instead:

@media(min-width: 980px){
  .x-pricing-table.four-columns .x-pricing-column {
    margin-right: 8px;
    margin-left: 8px;
    width: calc(25% - 16px);
    max-width: 284px;
  } 
}

Please let us know if this works out for you.

[creativetoast]

works great now. thank you sooooo much!

[Rahul]

You’re welcome!

[Author]

Posts