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.