How to make my stacked images stick together?

Hey everyone :wave:

having some trouble to align the circle with the map, should be stick together when it comes to responsivness.

thx for your support!

Oliver


Here is my site Read-Only:
https://preview.webflow.com/preview/olivers-ultra-awesome-project-cbdcf2?utm_medium=preview_link&utm_source=designer&utm_content=olivers-ultra-awesome-project-cbdcf2&preview=ff07e5b0c6129f6e8551fee6b440adfc&mode=preview

Hi Oliver!

I see that you’ve positioned your circles relative to the side of the container in percentages. Therefore the circles are not related to the map but instead the container which makes them move when you resize your window. There are ways you could fix your code but I think easiest option for you would be to include the circles on the image of the map if they are always going to be connected! Meaning, in an image editing software put the circles on the map already.

Let me know if it’s a solution you like, otherwise there are other things you would need to fix about your layout first.

Hi Katjass,

thx for your reply! You are right, there is maybe a little mess in the layout i think, i am new to that stuff and trying to figure out how it works. Having the circles and map as one image is not what i am looking for, because i want to animate them later. Sorry i do not mentioned that! :relaxed:

So I would be happy about an alternative solution.

Oliver

Hi, I tried to figure out what would be the simplest way!

I would recommend to create a div block inside ‘Map Container’ called ‘Map Image Wrapper’ or something similar. Then give that element position: absolute, width 840px (you had previously used the scale transform, so 840 is 600*1.4 scale, it’s cleaner this way), position it in a way that you want, I’ll attach a screenshot of what I did:

Then place the map image (with no class, just delete the class Map Image altogether) inside the ‘Map Image Wrapper’ that you created and it will look fine as long as you’ve positioned its wrapper nicely. Then put the circle images inside the ‘Map Image Wrapper’ as well and make sure they have position absolute and it shows that they’re relative to ‘Map Image Wrapper’.

This way the image and the circles will be always related to the same element, which means they stay together. Basically you just create a separate wrapper for them.

Hope this was clear!

1 Like

Hey katjass,

it worked like a charm :clap: , thx so much for the nice explanation. I was on the right way with the wrapper, but i missed something, now its fine!

Have a nice day!

Oliver

1 Like