I’m having real trouble trying to understand how I can create a products row which is responsive.
So I’ve created a row with 3 cols, each row has a div with an image and a product title. Also when you hover over the product div it gets a background overlay with a button.
My issue is how do I control it with different size images? yea I could tell the client you can only use x by x pixels but is that the correct way? If they dont the website will look a compete mess.
e.g
Desktop view - middle image is massive and doesn’t align.
Tablet view - middle image is massive and doesn’t align.
Mobile landscape - Images sizes are all over the place, also the black overlay doesn’t work correctly.
Mobile portrait - Image sizes are not the same, but its mobile portrait so not a big issue + black overlay fits perfect.
In my opinion the best way to control it is using background image in the div and not an image.
If your client put various size of images though the CMS it’s the only way to keep your layout clean.
Then you ll have to choose between option “contain” or “background”
I think you should use this setup since there ll be a more detailed page about the product if i understand well.
I prefer the same approach as @zbrah - i.e. instead of using the Image element, create a Div Block and apply your image as a background-image.
The reason is that the Div Block + background-image approach gives you a clean, natural way to crop, stretch & position the image content - which is especially important in responsive design. This has always been the favored approach in HTML and has very little to do with Webflow.
However…
In your demo, the image artwork you’ve used isn’t especially suitable for “containing” or “cropping.” The background goes to the edges of the frame ( rather than a white-background product shot ), and the image is cropped close to the product shot - so DIV-cropping will clip some of the product image as well.
If this is what you’re working with, you have two best options.
Go with a masonry-style layout ( think Pinterest ). There’s a tutorial in the tips section here. It’s more work, however you get to show the full product shot as in your demo, and get a responsive layout as well.
Use the Div Block background image approach, and crop the images- but use a Lightbox Link to display the full uncropped version so the customer can see the whole thing.
One more note-
On the manageability side, if your client is managing their own product list, you will definitely want to use the CMS. Otherwise they can really only edit product details- and won’t be able to add or remove products from the page.
