How to make "randomize CMS low code" responsive?

Design help CMS
1

Hi :slight_smile:

I need some help with making my CMS website (image grid) responsive.
My goal is to have many images beeing randomized while reloading the page, but still beeing responsiv and most importantly that they stick / are attached to each other. There are still some white, empty spaces at the moment, because my images have different ratios. How can I solve this?

Here is an example how it should look: Designlab

This is my website:
https://lukas-labor.webflow.io/low-code

PS: I got this CMS code from:
Internet: jquery - javascript Shuffle DIV's within DIV - Stack Overflow
Webflow Site: bwm-9-randomize-cms-items - Webflow
Youtube: https://www.youtube.com/watch?v=xxu5nDzmJCk&t=940s

Thanks a lot for the help!

  • Shuri

[1]: My Website: low code
[2]: Read-Online Website: Webflow - Lukas_Labor

2

hi @Shurimas_Factory I have checked referenced website and design is created with use of text columns too create quasi “Masonry” layout.

Randomise on page load can be set in WF UI Settings > Sort Order > Random Order

Hope these informations will point you right direction.

3

I`ve already tried the WF UI, but if you watch 11:14 in the video (https://www.youtube.com/watch?v=xxu5nDzmJCk&t=940s), he explains the refresh only works every 12 hours :frowning:

4

If you really want it dynamically sorted, you can use SA5’s Sorting lib with wfu-sort-dir = random. That will sort on every page load and would work with CSS-column masonry.

If you want to do something more advanced like Macy.js for your masonry, you’ll need to write your own sorting algo so that you can trigger Macy’s layout engine after your sorting is complete.