Creating perfectly square layout with CMS

Design help General
1

Hi there, I want to create an Instagram module in Webflow, similar to the one on this site https://couple.co (scroll down the bottom of the page), powered by a CMS collection. Without the CMS component, I’m able to build this layout fine using Flex and percentages, with the background image being set to cover to handle non-square photos. However as soon as I try and build it and including the CMS collection, even when using the same styles previously created, it seems to react differently, and I can’t seem to get the images to display while maintaining the perfectly square layout. I haven’t had issues creating CMS components in the past, but for the life of me I can’t figure out how to get it working!

I’ve included my test project, so you can see what I’m trying to build.

Any help much appreciated!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

2 demos that you could make a good use of:

At the end of this page http://clipping-masking.webflow.io/ there’s a demo of a CSS property that allows images to fill their container without being background images.

On this demo, you can learn how to make responsive square elements: http://css-square.webflow.io/

3

Hey Vincent, thanks so much for this! After a bit more trial and error - but with this new knowledge - I was able to get it all working! :+1:

4

Fantastic, thanks for reporting!