Struggling laying out 3 responsive images

[anthony61]

Hi folks, I’m struggling to get this problem sorted. I need to have one large image on the left and 2 smaller ones stacked on the right. But then on smaller screens I need them to all stack.

I’m trying to get it so they shrink depending on the page size then when the page size hits a certain point (mobile) they all stack. I have attached an image to show what I’m after.

I’ve tried all kinds of methods and the best one I had only works on some machines not all, so there’s an issue somewhere.

Any help would be appreciated.
Thanks.

[Gandalf]

Are these foreground or background images? It would help to see some code.

[SamA74]

I want to say flex, but the trouble with it is, when in column format, you must define a height to wrap to new columns, and I don’t like defining heights.
So instead I went for CSS columns, which don’t require a set height to wrap.

Grid would be another option (among probable others) but still have not got around to learning it properly yet.

[PaulOB]

@SamA74

Grid would be another option (among probable others)

Here’s a grid example but not as neat as your column method but could cater for some fluidity.

[coothead]

Hi there anthony61,

here is a flex example…

Full page:-
https://codepen.io/coothead/full/RwramKm

Code:-
https://codepen.io/coothead/pen/RwramKm

@SamA74

I want to say flex , but the trouble with it is,
when in column format, you must define a
height to wrap to new columns, and I don’t
like defining heights.

Luckily, I did not have any problem like that.

The only height value that I set was auto
for the images.

coothead

[Erik_J]

@coothead

Luckily, I did not have any problem…

…adding an extra div.

[coothead]

@Erik_J

…adding an extra div.

Necessity is the mother of invention.

Although:-
In an address to the Mathematical Association of England on the
importance of education in 1917, Alfred North Whitehead argued
that “the basis of invention is science, and science is almost wholly
the outgrowth of pleasurable intellectual curiosity.” and in contrast
to the old proverb “Necessity is the mother of futile dodges” is
much nearer to the truth.* [7]

coothead

[PaulOB]

@Erik_J

…adding an extra div.

2 extra divs actually (to be honest that’s the way I was going to do it anyway ;))

However I love the way with grid where you can simplify the markup and lose both those extra divs and still have a fluid design.

Here’s an updated grid demo:

I’m still learning with grid so there may be simpler ways to do this