CMS Periodic Table Challenge!

Hi all! I have a challenge! Can you make a CMS based Periodic Table considering the limits of 20 Dynamic Lists per page and a max of 6 column layout (per Dynamic List)? - I’d like each element to be a link to it’s page.

http://keejo08.webflow.io/periodic-table

The links to the individual pages work fine here through the CMS (http://keejo08.webflow.io/all-elements) but I’d like the Periodic Table to be a Dynamic List too!

Any ideas?!?! Thanks - Kai

Share link:
https://preview.webflow.com/preview/keejo08?preview=45a50dd69cbffb4938845b42b1797adb

5 Likes

Here’s 7 dynamic lists linking to the same collection of elements, each using flexbox with wrapping (so no column limit I guess), and with each a range for the number of elements to display

Wouldn’t it work?

ps: great site

thanks very much @vincent - I didn’t think of this way. It was the range for the number of elements to display that I was struggling with - this way allows to just select the range and only uses 7 dynamic lists - brilliant! I will try it out. Thanks for your help. Regards - Kai

(not so much of a challenge after all then!)

Like this :slight_smile:

Well just the principle of the flexbox list with wrapping and proper alignment.

I just hope your elements have been entered in the good order in the Collection to begin with…

edit : actually easily sortable by atomic number

I just realized you haven’t entered all the elements yet

It’s just amazing to build a dynlist and wee it populated with your design elements… really good looking.

@vincent Its the use of the Flexbox that’s the key here to get more than 6 columns in a dynamic list… THANKS!

Yes, I am adding the elements in the correct order! I’m only half way through adding them - it’s a grind… I love seeing it build itself as I add more elements though! All the best - Kai

Actually there are other way to stack more. here is the same list without flex, and I quickly gave the flex item a width and a float property

But flexbox makes the complex alignment possible in a breeze. Float has limits that are reached very quickly.

Thanks @vincent you’ve been very helpful! :slight_smile:

2 Likes

:zap: OUTSTANDING!!! :clap:

@PixelGeek @nwdsha - Thanks guys! That’s very kind! :blush: Best regards! Kai

This is the biggest and coolest project I’ve seen in Webflow yet! You’re doing a great job! Keep it up!