Docs

[Magik Web]

On this page: https://v2.magikweb.ca/produits/certificat-ssl
When we look at it on a tablet, the pricing tables are unaligned because of the floating. See attached file.
Is there a native way to adjust them for the tablet size?

We thought of clear:both, but it would affect the PC/bigger version.

[Nabeel A]

Hi there,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (max-width: 979px) {
.x-pricing-table[class*="-column"] .x-pricing-column {
    width: 30% !important;
}
.x-pricing-column.price_table:last-child {
    clear: both !important;
}
}

Let us know how this goes!

[Magik Web]

Thank you! It worked pretty well, we tinkered with it and ended up with this.

@media screen and (max-width: 979px) {
  .x-pricing-column.price_table:nth-child(3) {
      clear: both !important;
  }
}
@media screen and (max-width: 1279px) {
  .x-pricing-column.price_table:nth-child(4) {
      clear: both !important;
  }
}

It keeps the bigger size for small mobile while fixing the tablet view. (as far as we can tell)

Thanks again, you guys are very efficient and patient.

[Jade]

You’re most welcome.

[Author]

Posts