Mobile View Issues with Back to Top scrolling button

Site URL: http://www.dandelion-drum-w9ws.squarespace.com

I used the following code to add a back-to-top button to my site:

#back-to-top{
  height:35px;
  width:35px;
  position:fixed;
  padding:0px;
  bottom:0;
  right:0;
  z-index:99;
  display: flex;
  
  border-radius:50%;
  box-shadow: 0px 0px 0px #ccc;
  margin:20px;
  background:white;
}
}

This worked great on desktop view, but for mobile I'm now seeing the arrow as a giant image at the top of the screen, so large you can't even see the entire picture (see screenshot).

Additionally, sometimes when I first go to the site I see the image very large at the top, but then it shrinks down, as if the code is delayed. 

Any advice would be greatly appreciated!

You added code in wrong position so it caused problem on mobile.

Add this code to Bottom Of Custom CSS box.

 #back-to-top {
        height: 35px;
        width: 35px;
        position: fixed;
        padding: 0px;
        bottom: 0;
        right: 0;
        z-index: 99;
        display: flex;
        border-radius: 50%;
        box-shadow: 0px 0px 0px #ccc;
        margin: 20px;
        background: #fff;
    }

Amazing! Thank you so much for that, it worked perfectly : )