Jump to content

Mobile View Issues with Back to Top scrolling button

Recommended Posts

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

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

  display: flex;
  box-shadow: 0px 0px 0px #ccc;

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!


Screen Shot 2022-05-25 at 1.50.29 PM.png

Screen Shot 2022-05-25 at 1.44.51 PM.png

Link to comment

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;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.