When I inject code that creates a scroll down button the mobile view cuts off the logo and navigation at the top

I added code provided by @bangank36. It works fine on desktop but mobile cuts off logo and navigation. Here's the code: 

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<style>

#page section:first-child a.next-section {

      padding-top: 140px;

      position: absolute;

      bottom: 0;

      left: 50%;

      transform: translateX(-50%);

      z-index: 2;

      display: inline-block;

      color: #fff;

      font : normal 400 20px/1 'Josefin Sans', sans-serif;

      letter-spacing: .1em;

      text-decoration: none;

      transition: opacity .3s;

    }

    #page section:first-child a.next-section span {

      position: absolute;

      top: 0;

      left: 50%;

      width: 24px;

      height: 24px;

      margin-left: -12px;

      border-left: 1px solid #fff;

      border-bottom: 1px solid #fff;

      -webkit-transform: rotate(-45deg);

      transform: rotate(-45deg);

      -webkit-animation: sdb05 1.5s infinite;

      animation: sdb05 1.5s infinite;

      box-sizing: border-box;

    }

    @-webkit-keyframes sdb05 {

      0% {

        -webkit-transform: rotate(-45deg) translate(0, 0);

        opacity: 0;

      }

      50% {

        opacity: 1;

      }

      100% {

        -webkit-transform: rotate(-45deg) translate(-20px, 20px);

        opacity: 0;

      }

    }

    @keyframes sdb05 {

      0% {

        transform: rotate(-45deg) translate(0, 0);

        opacity: 0;

      }

      50% {

        opacity: 1;

      }

      100% {

        transform: rotate(-45deg) translate(-20px, 20px);

        opacity: 0;

      }

    }

</style>

<script>

$(function() {

      $("#page section:first-child").append('<a href="#" class="next-section"><span></span>   </a>');

      $('a.next-section').on('click', function(e) {

        e.preventDefault();

        $('html, body').animate({ scrollTop: $("#page section:first-child").next().offset().top}, 500, 'linear');

      });

    });

</script>

Whether I hide the scroll on mobile or not using CSS the issue remains. Screenshots are attached. Is there simple code I can add so the home page on mobile appears correctly?

Hi. What is your site url? We can check easier

Thanks so much.

The site is https://bulldog-denim-7l96.squarespace.com/config/pages

13 hours ago, Lesh said:

Thanks so much.

The site is https://bulldog-denim-7l96.squarespace.com/config/pages

Your site is private. Can you setup password & share url?

Hi. I'm not sure how the following resolved the issue but I deleted a comment I added at the top of the injected code and this resolved the issue. I then pasted the comment back where it was and the problem didn't manifest itself again. The comment only said that the code adds a scrolling arrow. Thanks Tuanphan.