Hi all, the CMS items displayed on this page are doing a strange ‘wavy’ pattern as you go along the rows (after the first row). It looks fine under preview in Webflow, but publishing messes with the format. After publishing, you can see this best with the ‘Learn more’ buttons as they go up down up down along the row. Not sure why this is happening, I’ve added plenty of margin spacing under ‘Mix’ (the collection list of items), and yet the layout is always still acting up this way.
Here is a screenshot of what I mean if it looks normal in the read only preview:
On another note, I like the center spacing for the full rows, but is there a way to left-align JUST the last row of CMS items (as seen at the bottom of the page with the last entry)?
Do you have some custom CSS going on somewhere, even in the site settings’ custom code section? I can see that you’re using the structure & naming convention required for MixItUp but it doesn’t actually seem to be implemented - have you cloned the project from somewhere?
Just trying to establish if it’s something you’ve accidentally done or if it had a purpose at some point elsewhere.
There’s no custom code in the page’s settings, so unless I’ve missed an embed somewhere (there are several and I think I’ve checked them all) the only logical place for code that could be doing this is in the project settings.
I do have some custom code that relates to the search bar as my implementation of MixItUp3. That can be found in one of my older posts here. No custom CSS though, just JS; I also haven’t cloned any project, just tried to build it up myself from preview links. Thank you for taking a look into this Andy
Something is causing a multitude of differing top margins to be applied to combo-classed items. Can’t for the life of me figure out what is causing it though!
They’re both left invisible (the first because they don’t work right now, and the second as a design choice), but going to see which has those massive top margins
You can see that the Animals value is missing on the two that align on the row below and the same goes for the two that have Animals values, they align with the two below as well.
You could set min height for each list item or make sure the content is more consistent, I believe that will clear up you issue.
That did the trick! I set the min height of the collection items (in my case, ‘mix’) to 500px, which I’ll play around with in the future. But that set all the items level. Thank you! Was clearly getting too much into the weeds of what has how much margin space.
On another note that also happened to push the final item (the only item on the last row) to be left-aligned. Can’t say I know why that happened but this has been perfect, cheers!
