Mobile Pricing Table Checkbox Alignment Help Needed

·Jun 14, 2024 12:44 PM

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

9 comments

· Sorted by Oldest

Matt J.
·
Jake Y. 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.
Jake Y.
·
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?
Matt J.
·
Sure yeah, here's a few I found for you - wide range here. https://savvycal.com/pricing https://www.contentful.com/pricing/ https://convertkit.com/pricing https://webflow.com/pricing https://www.figma.com/pricing/
❤️1
Matt J.
·
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.
👍1
Matt J.
·
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.
Jake Y.
·
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. 👍
Matt J.
·
for sure
Jake Y.
·
I was able to delete the gray rows and now it’s working perfect on my phone.
Matt J.
·
awesome!

Mobile Pricing Table Checkbox Alignment Help Needed | Relume Community