Community forum for knowledge and support

Updated 7 months ago

Pricing Table Checkboxes Misalignment in Mobile View

At a glance

The community member is having an issue with the alignment of checkboxes in a pricing table on mobile view. They have provided a link to a preview of the website and a Loom video. The community members suggest moving away from a table layout and using a card-based design instead, as this is more mobile-friendly. They provide examples of SaaS companies using card-based pricing. The community member considers removing the third column for enterprise clients, as they don't typically inquire on mobile devices. Ultimately, the community member was able to resolve the issue by deleting the gray rows.

Useful resources

Could anyone help with a small design issue I'm having? In short, my check-boxes on each row for my pricing table aren't lining up when in mobile view and I can't figure out why.

I have included a link below:
https://preview.webflow.com/preview/llxyz?utm_medium=preview_link&utm_source=designer&[…]12f5bdebc9&pageId=66603a2094333ce948aaa804&workflow=preview

I have also included a Loom video: https://www.loom.com/share/6019c911bfd74760af64ceb99e6a672a?sid=899b15e6-8465-4400-b2f7-69a9e1b7ca58

M
J
9 comments

yeah this is a notoriously difficult thing to manage. That's why if you look around at SaaS sites, they've gotten way from the table for the most part and went to cards because you can stack the cards on mobile. I realize that you've already put time into this section but I would recommend moving away from tables if mobile is a priority for you.

Your other option, while not ideal in many ways, would be to swap out this section on mobile for a card view. The risk you run there is having duplicate content and having to manage it as well as the SEO impacts of that.

Thank you very much for this response. I haven’t spent too much time on this so it’s not a huge deal to switch over. I’m trying to find a real time SaaS example of cards being using in pricing so I can visualize it.

Do you know of any companies using cards?

Ironically, Figma has both so you can get some idea of how they handle a table on mobile but they also only have two columns which makes a huge difference.

Looks like they somehow split up the 4 column table on desktop into 2 column stacked - I'd be curious if this was a calculated trade off to duplicated content or if they have some custom way to manage this content so that its not duplicated somehow but I would say its not as "easy" as they make it look either way.

Thank you very much. I’ll definitely take some inspiration from these websites. There’s a chance I might just get rid of the third column for enterprise.

I mean enterprise clients don’t inquiry on mobile devices anyway. 👍

I was able to delete the gray rows and now it’s working perfect on my phone.

Add a reply
Sign up and join the conversation on Slack