Docs

[alistair]

Please would you provide CSS code to prevent table from stacking on mobile? I need to keep it side by side even on small screens.

http://bridginggaps.org/packages

thanks

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

@media (max-width: 979px){
.x-pricing-table[class*="-column"] .x-pricing-column {
    width: 25%;
float: left;
    margin: 0 0 -1px -1px;
}
}
@media (max-width: 767px){
.x-pricing-table[class*="-column"] .x-pricing-column {
    width: 25%;
float: left;
    margin: 0 0 -1px -1px;
}
}

Hope that helps.

[alistair]

Hi there – I’ve made this change, and it has had an obvious (but I didn’t think it through) result. The table now throws all the lines out of alignment, due to the amount of text in the fist column (the features) – see screenshot.

So my question is:

1. How do others handle this?
2. Is there a ‘mulitple’ table approach, so that a mobile friendly version is shown on mobile?

Thanks

[Lely]

Hello There,

We can break the word for the text to fit in container but then it would be ugly. Try this:

.x-pricing-table {
    word-wrap: break-word;
}

It is not recommended to stop it from stacking because the space is really limited to display multiple columns.

[alistair]

Agreed. Time to rebuild the table!

[Rad]

Thanks, let us know if you have further issues regrading this 🙂

[Author]

Posts