CMS Periodic Table Challenge!

Design help CMS
#1

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
#2

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

#3

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

#4

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

#5

Like this :slight_smile:

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

#6

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.

#7

@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

#8

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.

#9

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

#10

2 Likes
#11

:zap: OUTSTANDING!!! :clap:

#12

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

#13

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