Add vertical column stacking on mobile

The pricing table is for the “Pricing” page I’m currently building on my Squarespace site:
https://www.styleismorethanfashion.com/tarieven

It’s specifically meant for the “Kleurenanalyse” (colour analysis — the one with the drapes, you might know it).
As you can see, there are three factors that influence the price:

  1. The number of people attending the session (1, 2, or 3) — listed in the header column

  2. Whether the session is booked on a weekday or in the weekend — also in the header column

  3. Whether the client chooses the standard (Essence) or premium (Plus) session — these are the two separate columns

Currently, on mobile, “1 person weekday” etc. is nicely shown above the corresponding price — I love that and would like to keep it! :slight_smile:

The only thing I’d like to change is the layout:
I’d prefer the columns to be stacked vertically (like the white blocks under “Personal Styling”), so users can scroll down to compare options. My audience mainly visits the site on mobile (about 80%) and isn’t very tech-savvy, so I’m worried the current layout is confusing or unclear to them.

Thanks again in advance!

2 Likes

I am using the pricing table more as a feature comparison, my company vs competitors. That being said, its very hard to understand the table in the new layout since you cannot see the full table. Is there a way to view the full table or stack it, as opposed to sliding through.

Provided screenshots to showcase how its difficult to understand on mobile view vs desktop

1 Like

Hi there, @Cortlynn_Danby :waving_hand:

Many thanks for the feedback!

I completely understand your point, but, unfortunately it’s impossible to change display the full table on mobile or stack the columns vertically. I am really sorry!

However, this idea is already on the Wishlist, and I’ve added your comment there too. If this request gets more votes, we’ll try to think about it in the future updates :slightly_smiling_face: