I have a collection list on our blog page with Finsweet’s infinite scroll code. The infinite scroll part works fine, but the further down you go, the more inconsistent the widths of the thumbnails and individual item blocks get, resulting in rows that look like this:
I’ve checked every last nested element and can’t figure out what is causing the inconsistencies - I’d like all the thumbnails and divs to be the same width no matter how far we scroll down. Could anyone take a stab at seeing what’s causing this issue? Thank you!
Collection lists can sometimes display inconsistent heights when their items contain varying amounts of content. Flexbox is the ideal solution for this as it naturally maintains equal heights across all items while accommodating different content lengths.
To implement this:
Select your Collection list wrapper
Set the Layout setting to “full width”
Enable Flexbox in the layout settings
Adjust the flex properties as needed (such as gap, alignment, and justify content)
The flexbox layout will ensure your Collection items maintain consistent heights regardless of their content, creating a more polished and professional appearance.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Since this is content is being changed by FS List Load, you want to see it after the script’s work- the designer view won’t help you much here.
Publish the page to staging and then use Chrome’s devtools to inspect your HTML on those smaller images. Usually it means you need a 100% width somewhere for the card to fill the column.
Had this happen with FS Load too , the fix was setting the image or card wrapper to width:100% so each item snaps to the column width. Check in devtools after scroll load, since Designer won’t always show the issue.
