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.
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.
Could someone help before I pull my hair out?