Overlapping Content/Fixed Scrolling Arrows

Hello! On this site I am currently using a plugin to enable fixed arrows to help the user scroll up and down on the page. The desired outcome is for the scroll to land neatly above the title of each section. The plugin only allows scrolling to be set using percentages of the screen which is very difficult to set so that this happens on a variety of screen sizes. This is the first part of the problem.

In order to attempt to achieve this result, I have adjusted the top position of the sections but doing this (I’m assuming this is the cause because playing around with the CSS I’ve managed to fix the mobile layout a bit better), my content overlaps horribly on mobile.

I will likely hide the arrows on mobile so I’m not concerned about those neat sections on mobile but is there a way to adjust the layout on desktop for my divs to be where I want them to be without making them go nuts on mobile? Or is my best bet going to be using media queries to adjust my div positioning?

The page I need help with: [log in to see the link]