How do I keep two images to stay in the same place relative to eachother and make it responsive?

I want two images to stick with each other and have it be responsive.

It’s hard for me to explain so I’ll just show you this quick video of exactly what I’m trying to do. https://www.loom.com/share/1564ad4f17ac460a9e6f0617364a0a90

I’m trying to do this by making the images absolute and the parent div relative. After that I dont know what to do. I can get it right on desktop but as it shrinks it gets all messed up.

help?

Here’s a share link in case it helps.

You have why us div and then a lot of other div’s not doing much.
Webflow tend to like things in box’s.
Use sections and then pop divs in side is good practice.
Section
---- Why use div
Girl pic
storage pic

make why us parent.
The two pictures absolute and set them both to top left.

See how you get on, bed time for me.

set them both to top left

Yeah I have the other divs because I am going to add more content. I just added it so you can see.

I forgot to add sections instead of divs. Thanks

I already made the pictures absolute. The problem is they get all messed up on mobile.

1st thing is you have max sizes for the girl, so the image wont go below that size.
move the girl picture under storage and remove z-index.
The rest really is just break points for the girl picture.
For mobile landscape under 2D & 3D interactions added scale 0.8
For mobile portrait position left 7% top -25%

1 Like