Relative Element Position changes in between Different Breakpoints

Hello community,

I’ve been stuck in this problem for a while and decided to ask for help.

Basically I’m trying to have a lottie animation hover on top of a word inside of my Heading element.

To achieve this effect, I have set the position of my Heading element to relative and inside of it I have a word around a span element, and below the Heading I have a lottie annimation with position absolute that I’m trying to make hover on top of my span element in all different breakpoints and in between them!


The problem is if I use my mouse to check the responsiveness in between breakpoints with my mouse, I can’t manually fix them so the animation is ALWAYS hovering the span, like in the exam below in between desktop and ipad breakpoints.

Also, If I go ahead and change the absolute position of my lottie in a specific device in between my desktop and ipad breakpoints, when I go back to the desktop breakpoint, the animation now has moved.

This is the structure of my elements:


I have tried leaving everyone with position static and change the span to relative, but then the lottie animation starts aligning with the body.

Need help for or ideas for a solution, thanks in advance.

Here is my public share link: LINK
(how to access public share link)

Up… trying to get this post seen so somebody can help