Comparison Table

Question
1

One of the most important things I need to put on my new marketing website is a simple “comparison table” to showcase features of different service offerings.

I’m not concerned with creating one for desktop, but making sure it displays properly on mobile or, if I’ll have to come up with an alternate display option for mobile.

The layout is vertical with a maximum of 3 service offerings with the lower “blocks” or fields which service level has which features attached to it. We’ve all seen these, just want to make sure mobile can display it properly or not.

Best.

2

One option is a layout grid, with 3 cells in this example:

CleanShot 2025-02-20 at 17.45.49@2x
CleanShot 2025-02-20 at 17.45.49@2x1914×1362 115 KB

Grids will automatically reflow the cells on mobile, so after applying the text size and zooming out this is what you’d get:

CleanShot 2025-02-20 at 17.45.19@2x
CleanShot 2025-02-20 at 17.45.19@2x1496×1562 79.2 KB

3 Likes
3

I should have sent an example…enclosed. I don’t need an exact match but yes, your grid tool sounds like the right fit. I’ll have to experiment with layout/design to get the right fit. I’ll report back with what I come up with so others can figure this out too.

sample
sample1345×815 148 KB

4

Finally, here’s the exact type of table I want to create - easy for desktop but how to translate this to mobile??

table example
table example851×381 67.6 KB

5

Mobile adaptation of a table is unsatisfactory regardless of the coding technique. There isn’t any way other than manual adaptation in Sitely but also if you view hand-coded tables there isn’t any nice way to do it as far as I can tell.

6

Kinda figured that was the case. No worries, just time for more out-of-the-box thinking to hit the goal. I’m used to that process. Cheers!!