Hero Section on Home Page is not Responsive

In the webflow designer, I have designed different layouts of my home hero image for desktop, tablet, landscape and portrait. When I load the page in different screen sizes, it works fine, but if I’m on my desktop and I readjust the screen size without reloading the page, the hero images gets messed up. I’m not sure if this is because the hero section is set to relative? But the text and images are auto. If anyone has some input on how to fix this, I’d really appreciate it!

Side note: the section is set to relative because of an animation I have on the navbar (hide when scroll down, show when scroll up)


Here is my site Read-Only: [LINK][1] : https://preview.webflow.com/preview/practice-website-09d944?utm_source=practice-website-09d944&preview=8d1d464767a02f9a1d1c023204ac449f

Published site: http://practice-website-09d944.webflow.io/