Elements Jump when browser resized

[icreate (David Stoltz)]

Hi All,

Please check out this small 1-page site:
http://urgentcarefront.webflow.io/ (Share link below)

The puzzle pieces zoom in OK at desktop and tablet size, and are hidden on mobiles. The issue is, if the browser is resized, the puzzle pieces jump around - not sure why. I tried assigning pixel width to the div’s they are in, but that’s didn’t seem to work.

Perhaps I’m doing the puzzle pieces the wrong way? I have 4 PNGs, and I’m using interactions (page load) to bring them into place.

Any advice appreciated.

---

Here is my public share link: https://preview.webflow.com/preview/urgentcarefront?preview=9f94ea5df4605d9a991dcd11ce95f6e9

[icreate (David Stoltz)]

Actually, it seems this is happening in Chrome - IE seems ok.(there’s a first)

[sabanna (Anna)]

Hi, @icreate

Maybe it will make sense to change the interaction a little bit. I would set the puzzles in the correct place and size by default, then with initial state move them away (as you did) and interaction would move each of puzzle to origin position ans scale to 1

It may also help making images (puzzles) position: absolute

Regards,
Anna

[icreate (David Stoltz)]

Didn’t have a lot of luck changing position to absolute. Each piece goes back to a .8 origin, so it’s a little bit smaller than the original image - still not sure why Chrome jumbles the pieces when the browser size is changed.

[icreate (David Stoltz)]

Found the problem - the Chrome jumping was caused by some negative margins I was using…