Responsive Web Design Question - 3 images with text underneath question

[radderfire]

Hi Guys

What is the best/simplest way to build this with a responsive design:

- On desktop I want a row of three images, each 200 pixels wide by 266 pixels high. Beneath each image I want caption text.

- On mobile browser 320 pixels wide, the images will just be in a column, each with caption text under each one.

I am just trying a ul now, but I am having problems on desktop as if the first li has none or little caption text, then the caption text from the second image will slip underneath the first. How do I stop this?

Thanks

 

[Dup]

What age of browser support do you require?

If IE10+ then Flexbox is the way forward. Done a quick Pen for you:

https://codepen.io/Dup/pen/wGQWap

 

[radderfire]

Thanks for that. I will have to have a think about exactly what browser support I need.

 

[Dup]

Using inline-block with same mark-up:

http://codepen.io/Dup/pen/reQLjX

inline-block adds an inherent gap between items, so you need to make sure there is no space between the end and start divs.

You can also do this with ol/ul and set the li to inline-block, just remember to reser the passing and margin on the parent to zero.

Calc is also a modern browser function (IE10+). I've used it here with margins purely becasue it's simpler to avoid issues with padding adding to the width of a container.

You can avoid padding adding to container widths using the border-box method noted below:

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

This makes layouts less of a headache. So instead of margin, set the width to 33% and add whatever padding you need to give space between the objects instead.

 

[radderfire]

Thanks for your help with this.