Display columns horizontally on mobile

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

@media (width <= 640px) {
  .global-styles,
  .eapps-pricing-table {
    width: 100%;
  }

  .eapps-pricing-table-inner {
    width: 100%;
    overflow: hidden;
  }

  .eapps-pricing-table-columns-container {
    flex-direction: row !important;
    align-items: unset !important;
    justify-content: flex-start !important;
    width: 100%;
    padding: 1px 0;
    overflow: auto;
  }

  .eapps-pricing-table-column {
    min-width: 275px;
  }
}

Note: The min-width should be adjusted depending on the number of columns

love this idea, but it doesn’t seem to be right even after playing with min width. It scrolls right but not left, and I have three columns. So you can not see all of the “first” one.

2 Likes

Thank you for bringing this to our attention!

I’ll double-check it with the devs and will get back to you on Monday :slightly_smiling_face:

Hi @Rev_Devan :wave:

The previous code worked great on the websites, but had some issues in the configurator. I’ve replaced it with the new code that’s working great in the configurator as well :slightly_smiling_face: