Pricing Table changes

[ikwillerendraaien]

I have a problem with the pricing table.

With 5 rows/prices:
On a desktop/macbook, the 5th row drops down below the 4th..as shown in picture 1.
On an iPhone, they all show nicely below each other. Shown in picture 2

With 6 rows/prices:
On a desktop/macbook, they all show next to each other, like they should. Picture 3.
On an iPhone, they show right next to each other.. that doesn’t work.. Picture 4.

Obviously I want them normal (next to each other) on computers and below each other on phones.. And I have 6 products.. So the desktop version does it’s work.. but the phone should show them below each other instead next to each other.
(Don’t mind the content in the tables, clearly not finished. Wanted to check this first before I finish them)

Please help!

Attachments:

You must be logged in to access attached files.

[Raghavendra]

The present grid framework we use is a 12 column grid which cannot support 5 columns. It can support 1, 2, 3, 4 and 6 columns. It defaults to 4 columns if you specify 5 columns.

We did not anticipate someone using 6 columns due to space constraints and hence the responsive code is missing.

Pls use the following custom CSS and things should align nicely. We will have this patched in next update.

Thanks for bringing this to our attention –

  @media only screen and (max-width: 1024px) {
    .pricing-table .twocol {
      width: 48%;
      margin-right: 2%;
      margin-bottom: 20px; }
      .pricing-table .twocol.zero-margin {
        width: 50%;
        margin-right: 0%; } }
  @media only screen and (max-width: 479px) {
    .pricing-table .twocol, .pricing-table .twocol.zero-margin {
      width: 100%;
      margin: 0 0 20px 0 !important; } }

[ikwillerendraaien]

Hi Meteorite,

Thank you so much!

This may sound silly.. But where do I put custom CSS in the theme?
Downloaded a custom CSS plug-in, but that doesn’t allow me to put it on that particular page..

Thanks in advance!

Noah

[ikwillerendraaien]

Meteorite!

Nevermind, overlooked the CSS box. It works like a charm!
So happy!! Thanks a lot. Really really like the theme!

Well done!

Best,

Noah

[Author]

Posts