Vertical display for the Classic Table on mobile

CSS Codes Pricing Table
1

Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings:

@media (max-width: 768px) {
  .es-layout-classic-table-snap-carousel {
    display: flex !important;
    flex-direction: column;
  }

  .es-snap-carousel-item {
    display: flex !important;
    position: relative;
  }

  .es-column-container::before {
    height: 100%;
    position: absolute;
  }

  .es-ribbon-container {
    position: absolute;
  }

  .es-column-container::after {
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.05);
    height: 100%;
    position: absolute;
  }

  .es-snap-carousel-item:not(:first-child) .es-column-container::after {
    border-top: 0;
  }

  .es-layout-classic-table-container {
    border: unset;
    border-radius: unset;
  }
}
2 Likes
2

Great job! Thank you!

2 Likes
3

Glad to know the code worked for you!

Many thanks for the feedback and welcome to the Community, @Inception_Designs :wink:

4

Hi @Max

This seems to break the background colour? https://07c15b6310864de3b97084ba7472b3eb.elf.site

  • Kasper
1 Like
5

Hi there, @Kasper_Skov_Jensen :waving_hand:

Thank you for your note!

Here is the adjusted code that works great:

@media (max-width: 768px) {
  .es-layout-classic-table-snap-carousel {
    display: flex !important;
    flex-direction: column;
  }

  .es-snap-carousel-item {
    display: flex !important;
    position: relative;
  }

  .es-column-container::before {
    height: 100%;
    position: absolute;
  }

  .es-ribbon-container {
    position: absolute;
  }

  .es-column-container::after {
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.05);
    height: 100%;
    position: absolute;
  }

  .es-snap-carousel-item:not(:first-child) .es-column-container::after {
    border-top: 0;
  }

  .es-layout-classic-table-container {
    border: unset;
    border-radius: unset;
  }
}