Element Designs (Position) Moves On Different Desktop Screen Sizes

Design help General
1

Hi, I am new to webflow design and this is my first project. I am currently having problems with the design layout on each desktop screen sizes. I’m editing webflow from a windows 10 with 1080p screen. The design of my webflow includes multiple parallax and animations. I started to run into problems when i try view my site on a Macbook 13 and 15 inch. The position of the elements on the site moves around in each screen sizes which makes it unusable. So the question is how can i optimize it for different desktop sizes or resolution? or is it something that i did incorrectly with the elements. I’ve shared the preview link below for you guys to have a look. Please help as this is getting very frustrating.

Here is my site Read-Only:
https://preview.webflow.com/preview/kitp20-landing-page?utm_medium=preview_link&utm_source=dashboard&utm_content=kitp20-landing-page&preview=1a08f225461bb206b53d5003a1346ae9&mode=preview

2

I would recommend using percentage (%) or VH and VW instead of PX when sizing any section, container or div. Same also when making transitions, it should move by % and not by PX.

3

Hmm I am using predominately percentages and VW/VH for my elements, but they still seem to be distorted between 1080 PX and 1440 PX and 2880 PX views - maybe I am not using it correctly? This has been a constant struggle. If you have any suggestions I would be very grateful - thanks.

https://preview.webflow.com/preview/hunters-portfolio-2ac79f?utm_medium=preview_link&utm_source=dashboard&utm_content=hunters-portfolio-2ac79f&preview=944a9606a10862b294ef64a64a834b89&mode=preview