Help with unusual stacking with collection lists

Hi there,

Would really appreciate help with a collection list that is creating issues on smaller desktop and iPad views. It’s a team page where each member is included as part of a collection list but some are pushing others down the screen on smaller screens. There doesn’t seem to be a consistent reason for this as it’s affecting members with longer names/job titles differently.

Any help would be HUGELY appreciated. 2 screenshots and public link included below.



Here is my public share link: https://preview.webflow.com/preview/bregal-milestone-817ad2e16832846225fc97?utm_medium=preview_link&utm_source=dashboard&utm_content=bregal-milestone-817ad2e16832846225fc97&preview=811117bcfce702ba5735bfaf1c8a32b7&mode=preview

Columns use floats. Alignment can be affected when floated elements have different heights. Usually flex or grid is a better choice; giving you more control.

Thanks for the reply Jeff. I’m afraid I don’t actually know how I could include a collection of this type in any layout that isn’t the automatic columns when I bring in a collection list. Could you advise on how I would adjust to flex or grid?

The University is the best place to learn. Here is an example of using CSS grid with a collection list.

CSS grid in Webflow | Webflow University

Thanks very much for your help