Streaming live at 10am (PST)

Elements Jump when browser resized

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

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

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

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.

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

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.