Dynamic List Breaking (Not scaling properly)

[c062785 (Christopher Neil)]

I’m trying to create a simple list of some CMS content, and it was working great, now it’s broken for some reason and I did nothing…

Acts different across all browsers, but this is what happens:

When scaling the ‘list-items’ jump around, sometimes jumping to the right side or skipping a row and dropping content below it.

I had to create two ‘dynamic lists’ in order to have a 4-column and a 2-column for ‘mobile’.

Any help would be great, this seems to be super broken…?! And this is for a client!

Here is the specific page: https://webber-studios.webflow.io/filmography

Here is my site Read-Only: https://preview.webflow.com/preview/webber-studios?utm_source=webber-studios&preview=8ee56770852affcee26b22e7c15485ca
(how to share your site Read-Only link)

[Thomas_92 (Thomas)]

Hi @c062785

Firstly, you shouldn’t need to create two different lists to achieve this.

Try just setting your ‘list-item’ to 25% when you want the 4 column and then on the mobile view port, change that 25% to 50% and you will have the 2-col.

Hope that sorts your issue,

let me know how it goes.

Thanks,

Tom

[c062785 (Christopher Neil)]

Thomas,

Thank you! That works great, but there is flickering now happening when you scale down on a Chrome browser…

And on Safari browsers, the mobile layout is super broken…

Attached screen grab of both!

Any help would be great guys! Would love to solve this one!

Screenshot 1: Safari browser, for some reason there is that space and funkiness…
Screenshot 2-3 : This flickers back and forth on Chrome, showing the flicker it switches back and forth from…

[c062785 (Christopher Neil)]

This also happens on Safari, along with the same flicker on Chrome…

No idea why this is happening, the dynamic list is populating the content. I only have flex-box on the list item in order for the text to be centered under the poster…

Any help is great!! This is super annoying and I have 3 more Dynamic Lists to create, would hate for this to happen again or have to fix those as well!!

[Brando (Brandon Roche)]

Hi @c062785

You can fix this by using display: flex and wrap children on your collection list. Can you please try using these settings:

​Please let me know if this is helpful!

[c062785 (Christopher Neil)]

Thank you!!! Thank you, thank you, thank you!