Floating Bubble Resizing Issue

Hi Everyone!

I’m having a bit of an issue with my floating bubble interaction. When the page finishes loading, the bubble is supposed to start bouncing around off the edges of its parent div (the bubble-w div). Width-wise, I want the bubble to bounce off the edges, even as I resize the browser window. Height-wise, I want it to bounce off right where the bubble-w div meets the next div (so basically the margin between the two divs where the background color changes).

I have tried all sorts of units combinations. Either I seem to be able to make the interaction work as I wish width-wise, or height-wise, but I can’t seem to make both function properly at the same time.

I would greatly appreciate your help with this. Thanks!!


Here is my public share link: https://preview.webflow.com/preview/project-1-3389ae?utm_medium=preview_link&utm_source=designer&utm_content=project-1-3389ae&preview=a49dcc58b862cadd5f6ae7840b9deaf8&mode=preview
(how to access public share link)