Pricing table not mobile responsive

Ask the Community General Questions
1

my pricing table is not displaying properly on mobile: https://www.sharewise.com.au/membership-pricing

see screenshot

Screenshot 2024-10-28 at 8.08.57 pm
Screenshot 2024-10-28 at 8.08.57 pm740×1360 84.9 KB

1 Like
3

Hi there, @user16276 :wave:

I’ve checked your website and the widget is displayed correctly on my end (vertically as a List view):

image
image1103×2103 85.3 KB


If you’d like to display tables horizontally, feel free to use this code in the Custom CSS field on the Appearance tab of your 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;
  }
}

If the issue still persists, please specify the device you are using. I’ll be happy to look into this for you :slightly_smiling_face:

4

thank you max. I like it displayed vertically how your screenshot shows. however, how do I make the caption underneath the price centred? i.e. the $84.58 monthly fee is aligned to the right

1 Like
5

We’ve fixed the issue with this CSS code:

.eapps-pricing-table-inner * {
  float: none !important;
}

Please check your website and let me know if it’s fine now :wink:

1 Like
6

that works now! thank you so much max for your help!

2 Likes
7

No sweat!

By the way, we’ve just launched a new challenge, where you can win a 6-month extension to any of your subscriptions.

Check the details and join in - October Challenge: Create Slogan for Elfsight and Win 6 Free Months! (+2 weeks guaranteed)

The challenge will be finished on October 31, so do not miss your chance to participate :wink:

8

Is there a way to show left and right arrows when the scroll comes into effect on mobile?

1 Like
9

Hi there, @Jimmy_Starr :waving_hand:

Unfortunately, there is no way to achieve this now, but this idea is already on the Wishlist. Please upvote it here :slightly_smiling_face: - Display navigation arrows on mobile