3 Images inline responsively

[anthony61]

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!

[Erik_J]

Hi anthony61, welcome to the forums!

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

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.

[anthony61]

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!

[coothead]

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

[anthony61]

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.

[coothead]

No problem, you’re very welcome.

coothead