I am creating my first website on webflow and have come across a few issues that I need help with. It is a product design website that does not involve E-commerce at this stage but I am using CMS to display the portfolio of products. I’ll be posting these different issues as different replies to this topic.
Starting with the first one: I am trying to create a CMS based collection of products which I want to flex horizontally. I however, do not want to enter any custom width or height so that the images are true to their original proportions and varying in sizes but the issue is that when the values are set to auto, the size of the images is huge! (Because I guess that’s the original size of the images). How can I transform the size of these images? I tried transforming them to 50% but the size of the container still remains the size of the original image (Container Width: Auto Height: Auto) and does not flex as expected. Is there a way to transform the images in a collection list individually or making them smaller without entering a specified width for all the collection items together? Or a custom code which can size each image randomly when the browser tries to pull the data from CMS?
This is something I am trying to achieve out of CMS:
Here is my site Read-Only (The Collection List is at the very bottom of the page): https://preview.webflow.com/preview/csg-new?utm_medium=preview_link&utm_source=designer&utm_content=csg-new&preview=14be26baf2ad8287aa5309ea3483bc92&mode=preview