CMS items in a weird wavy spacing pattern

READ ONLY LINK

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)?

Any advice is appreciated in advance, cheers!

1 Like

Without seeing the published site it’s hard to say what’s going on here.

Good point, here’s the link

1 Like

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.

A further thought on that subject is that it’s adding classes to the div which is where I believe the additional top margin is coming from.

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!

image

That’s a lot of empty space! Looking into that now …

That will either be the hidden filter buttons (that were brought up in the older post linked above),
image

or the category links under each CMS item

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

Oh nevermind, my last comments were not helpful; I see where you’re referring to. No clue either what’s causing the fluctuating top margin there.

@Henrik - I think it has something to do with the height of each list item being different:

For instance the height of this item is 456px:

the lion to the left of it is 434px:

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.

3 Likes

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!

2 Likes

Top marks to @sam-g!

4 Likes