3 Images inline responsively

Hi folks,

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…
Cheers!

Hi anthony61, welcome to the forums!

Could it be that you have the default margins on the body pulling your leg here? :wink:

If so:
Today browsers usually have an 8px margin around the body, but to be on the safe side the commonly used reset rule still covers for all variants of margin/padding on both html and body:

html, body {
  margin: 0;
  padding: 0;
}

If not, you’re welcome to post some code to debug. :slightly_smiling_face:

Hi Erik, thank you for your reply.
I don’t think the body margins are causing the issue as it’s such a wide gap. I’ll attach a screenshot of how it’s currently looking on an iPad preview. This is where it’s dropped to 2 columns (which is what I want) but they’re not expanding to full width.

My code is pretty much non-existent, just using inline-block for the images which are contained within their own divs. However, where the code will be used I don’t know if I can have separate css I think it will all have to be inline.

EDIT: Ignore the fact they’re all the same image, I’m testing before I make the rest.

Cheers!

Hi there anthony61,

does this help…

https://codepen.io/coothead/full/VwYRjxq

HTML:-

 <div id="image-container">
  <img src="https://i.picsum.photos/id/1018/800/496.jpg" width="800" height="496" alt="">
  <img src="https://i.picsum.photos/id/1043/800/496.jpg" width="800" height="496" alt="">
  <img src="https://i.picsum.photos/id/229/800/496.jpg" width="800" height="496" alt="">
  <img src="https://i.picsum.photos/id/100/800/496.jpg" width="800" height="496" alt="">
  <img src="https://i.picsum.photos/id/108/800/496.jpg" width="800" height="496" alt="">
  <img src="https://i.picsum.photos/id/140/800/496.jpg" width="800" height="496" alt="">
 </div>

CSS:-

#image-container {
    display: flex;
    flex-wrap: wrap;
 }

#image-container img { 
    width: 33.333%;
    height: auto;
 }

@media ( max-width: 50em ) {
#image-container img { 
    width: 50%;
  }
 }

@media ( max-width: 25em ) {
#image-container img { 
    width: 100%;
  }
 }  

coothead

3 Likes

You sir are a star, this works a treat, thank you!
I was worried that using the style separate wouldn’t work because of how it’s being inserted into the theme, so I was trying to do it all inline.

Thank you for taking the time to help me out Coothead and thank you too Erik.

1 Like

No problem, you’re very welcome. :biggrin:

coothead