Responsive positioning the elements

Hi, I’m a beginner in building the website and trying to make a hero design below. The right side image is a lottie file (watering animation) and the left side is the content. The problem I am facing is that when I make the lottie in absolute positioning, it works on PC but really bad on other devices. Please help me to find the positioning them so that elements can be responsive. :frowning:


Here is my site Read-Only:
https://preview.webflow.com/preview/grflz?utm_medium=preview_link&utm_source=designer&utm_content=grflz&preview=10bf84c4b6b4f5161310d72cbab3c255&mode=preview

Can you also post .io link too so we can sdee how it renders in browser?

Is it your intention to make your WF look like the image with green background?

Is this your intended result?