Responsive Double Image CSS Layout
How would you lay this out at desktop (1920), tablet (834), and mobile (375)?
I reached for
grid but I'm having particular difficulty with the fact that the two images need to maintain their relationship to each other, which makes using a grid impossible (or so I thought). I've created two divs and used flex to make the content change at smaller screens.
7 Replies
Mobile layouts.
is it not easier to keep the images as one single image and align that one using grid or a flex layout? The first paragraph you can align using grid-columns or just a negative margin
And the image then includes all the whitespace? That may be easier I suppose
or put the images in a container, you will posirion them in relation to eachother and then the container in relation to the page
Yes, the image should contain all the whitespace if you opt for a single image. BTW. I have tried to replicate your layout in a codepen using a full grid-layout. It should be something like this. Some finetuning might still be required. https://codepen.io/janvalkenburg/pen/qBvXPGo
you could probably use something like clip-path on a single image to hide part of it, then just treat it like a single container
Thanks yall, this helped a bunch: @angelus12 your solution is very slick, the way I'd go in the future if I had complete freedom with CSS (I'm currently building in Webflow and it's quite prescriptive). But @Caps-look gave me the mental frameshift I needed in terms of treating it like a single container rather than trying to position two ever-changing rows of content.
Big love for this community! ✨