Hi Guys,
I’m trying to find a structure solution in webflow that would allow me to create a comparison chart like the one on this page: http://www.thecrowder.com/index.php/categories/reviews/design/main
Can you suggest an approach?
Thanks
Something like this:
http://vincent.polenordstudio.fr/snap/xxnqi.jpg
Don’t forget to set the main row NOT TO morph for devices. Except maybe the one containing logo+band, that can stack up to save space on devices.
I put a div inside all columns, so that you NEVER give a class and style the column, because it leads to complications. So instead give any padding and styles to the div inside.
Oh and you can use black star and star for your stars, instead of grabbing an icon or something else… it’s right in every font (:
Black star ★ U+2605 ★
Star ☆ U+2606 ☆
Vincent - thanks a lot for the detailed reply! it makes much more sense now…
When it comes to mobile, I was thinking that it would be best to display only the first column (brand logo and name) and the last 2 columns: ‘Rating’ and the ‘visit website’. Everything else should be as an expand - collapse mode… how would you go about doing that?
I really do appreciate all your help.
If you want to ditch entire columns for selected devices, then give a class name to every one of the coulmns you want to make disappear. this means every cell. Then once selected, set to not appear for devices (in the settings tab).
I just tried if it was possible to affect columns visibility, and yes it seems to work.
2 Likes
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.