Hi there 
I have 8 CMS items. I have set the Collection List wrapper to display in rows of 4. This works fine for the first row. The second row has one item and the third row another 3.
Looking for help, please! Cheers,
Here is my public share link: https://preview.webflow.com/preview/remote-london?utm_medium=preview_link&utm_source=designer&utm_content=remote-london&preview=065eecc37b2c29aa66c5a0e5bd96dda3&mode=preview
Hi,
I checked out your read-only link and i see 4 items in each row, so i assume you were able to fix it? Or maybe i looked in the wrong section?
Cheers.
Hi Kimmy,
I wasn’t able to fix it actually. Instead, I created two collection lists, the top displaying items 1-4 and the next items 5-8 from the same CMS. It will do for now but it’s not an ideal long-term solution.
If you switch the top collection list to display 100 items like it’s set at default, the rows are all over the place.
The section is labelled ‘Talent Portfolio’. Thanks for looking.
Hi,
The reason why you’re getting weirdly positioned entries is due to the fact that your collection items have the “height” and “width” attributes set to auto.
This will cause the misalignment between CMS items as they have different amounts of text.
A possible solution is to set your collection item to a defined minimum height, so that CMS items with smaller text will still “respect” the minimum height and will be positioned accordingly.
Here’s a preview:
Added some div blocks as seen here:
You will still have to set those divs and the main CMS item to flex layouts (vertically aligned) so that you’re able to position stuff the way you want it to look.
You can also set minimum heights to the divs so that it always respect that size, no matter how long or small the text is.
Hope this helps,
Cheers.
Kimmy, you are a superstar. I’m so happy you cleaned that up for me. It’s funny how many solutions are right under our nose; I would have never found that without you.
I’ve opted to set the min-height of the collection list item to 50vh.
Cheers,
Chris
Happy to help
Remember to test it out in different resolutions and different devices like tablets or small screen phones, so that your content always shows correctly no matter the device resolution.
Also, be careful when you set divs or other elements to fixed “px” sizes. A “px” value is not responsive, meaning it will stay that size no matter how small or large the viewing resolution is.
So if you set something to X or Y px width in desktop mode it will still have that size when you switch up to tablet or phone resolutions. To make designs responsive you can use VW or VH attributes to make it move and re-position content as you move the resolution up and down.
Cheers
EDIT: Same goes for text sizes, “px” values will always maintain that size, no matter the resolution.
Beautiful thank you. I hope to finish the Desktop version today/tomorrow to start working through the different breakpoints.
