I’ve learnt about Isotope plugin through the super useful project by @SidneyOttelohe
Thanks for making it available!
What I’m trying to do is to have a CMS collection of Resources filterable by category. While I’ve managed to setup Isotope to work when the collection list uses layout “display:block;”, I can’t seem to make it work when using layout “display:grid” (grid looks fine on preview, but on the published site when the script kicks in it looks like the screenshot below).
While I could forget about using display:grid and have a functional filterable list, I’d prefer to use it as the responsive scaling is so much better than what I can achieve with my limited code knowledge…
Hello Chiara! Can you please share with us the link for the live website as well. Sometimes scripts change/add classes to the elements,causing some styling changes. I want to check if that`s the issue.
@Jeandcc I should add that I’ve noticed that adding a width to the “collection item” element (say 25%) fixes the layout somewhat, ie the cards actually display in grid formation, however when resizing the browser the grid “autofit” does not work at all… See screenshots below:
If it’s a bug, creating a new grid from scratch would be a good idea. Also, removing the minimum width settings for the c.items>resource cards might be helpful.
thanks so much for the insights @Jeandcc - I recreated the grid from scratch (no more empty cell!) fiddled with it and adjusted the “resource card” accordingly:
However if no width is specified for its parent (.collection-item), aka removing width:25%, the grid layout still acts up Unsure on how to fix this