I’m struggling a bit here. I would like to have 3 images in a row (which I have done) but when the browser window is made smaller (tablet size) I would like to have them drop to 2 in the row (which I have done) then when the window is phone size I would like them to drop to 1 per row (again I have done this).
My problem is, that the images aren’t always showing at 100% of the width, there are big gaps down the side of the images. I hope this makes sense.
Ideally they need to be 33% then 50% then 100% depending on screen size.
I’m assuming I need to have the images at 100% or something but this is where I’m struggling, I’m currently using a pixel width which I imagine is what it limiting me, but I can find a way to do it with the image at 100%.
I have included a mock up showing how it is now and how I want it.
I’m hoping someone will be able to help me out here…