Need help with responsive alignment of scrolling wave block and wave section divider

I created a scrolling wave block that aligns with the wave section divider below it. It looks great on desktop, but on mobile it's completely misaligned. I've attached screenshots for reference. Is there any way to fix this issue? Thanks in advance!

Here is the website I'm referring to: https://natrlandnutrldemo.squarespace.com/?password=demo

The top waves use different parameters for determining the frequency and length of the wave. I don't know of a way to set these to be the same on all screens, from what I can currently see it works only on a very specific screen size.

5 hours ago, Ziggy said:

The top waves use different parameters for determining the frequency and length of the wave. I don't know of a way to set these to be the same on all screens, from what I can currently see it works only on a very specific screen size.

Yeah this is such a bummer as these blocks are totally useless for mobile unless they're only in a straight line. 😅 I've contacted Squarespace support regarding this as it's a big issue with their responsive design. I appreciate your reply!

UPDATE:

Squarespace support is looking into the responsiveness issue regarding the marquee block. In the meantime, the only workaround I could do was to create a code that "turns off" the wave once I reduce the page width so that the marquee text doesn't look misaligned.

It works great when I view the mobile version from the editor, as well as from the mobile viewport on my desktop when I inspect the page. HOWEVER, when I view it from an actual mobile device nothing changes and it still shows the original wave marquee. 🤦🏼‍♀️ 😂 I've been able to successfully do other mobile workarounds this way but this is the only type of block than just refuses to change on mobile no matter what.

Here is the code I used for reference:

@media only screen and (max-width: 1250px) { .Marquee-path {d: path("M-550,51.636  L-550,51.636 S-183.15,51.636 0,51.636 S366.85,51.636 550,51.636 S916.85,51.636 1100,51.636 S1466.85,51.636 1650,51.636 S2016.85,51.636 2200,51.636") !important;}}

Any insight on this as to what went wrong?

Great find!

The only issue I see now is the large overflow this is causing on the right side:

11 hours ago, Ziggy said:

Great find!

The only issue I see now is the large overflow this is causing on the right side:

Yeah I noticed that too after the fact and I can't figure out how to fix it. I contacted the youtuber and let her know but I haven't found a fix for that overflow yet but this was the closest I could get to achieving what I wanted. Is you have any suggestions please let me know! 🙂