Horizontal Scroll Breakpoints

Design help Animations & Interactions
1

I have 4 elements that I need to be horizontally scrolled properly on the screen. I’m primarily using a 1920x1080p monitor, and the elements scroll just like I want to.

However, whenever I test it on my MacBook (1440p), the webpage would suddenly scroll up even if only 2 out of the 4 elements were shown/scrolled. I tried adjusting the VW to suit my Macbook’s small screen, but now when I’m testing using my larger monitor, the horizontal scroll would cause a large empty space on the right (just after scrolling).

Also tried implementing a higher breakpoint (1920p) and make the necessary VW adjustments to no avail.

Thanks in advance to anyone who can help.

Here is my public share link: https://preview.webflow.com/preview/cwc-sales-page?utm_medium=preview_link&utm_source=designer&utm_content=cwc-sales-page&preview=acef0f69fae832bacbd71e3c521e4845&workflow=preview

Published demo site: https://cwc-sales-page.webflow.io/

2

I think it would be best to use script form @timothy1643 Perfect Horizontal Scrolling CMS in Webflow - YouTube
Or you can get the idea if you want to try your own.

But there is one issue with his implementation if you are using REM as unit.

For that check the solution in here Custom Code is interfering with REM value - #10 by abirana

I also want to point this out to @timothy1643