Jump to content

Scrolling Issues on Mobile Screens

Recommended Posts

Hi there, 

I am having scrolling issues on my client's site when viewed on mobile screens. It seems that the website buffers and does not allow the user to scroll down immediately from the top of the page, especially on the blog page (shown in video attached).

I implemented the below code to hide overflow/horizontal scrolling on the website that I believe could be the issue. The code works seamlessly on desktop and some mobile screen sizes, but on some sizes I believe it is the cause for creating this "buffer scroll" issue you see in the video attached.

Code implemented: 

html, body {
    overflow-x: hidden;


I have tested the website on an iPhone Xs, iPhone 14 Pro, iPhone 12 mini, and Samsung Galaxy and this scrolling issue does not occur. However, when tested on an iPhone 13 and 12, this is when the issue occurs. It was also tested on Safari and Chrome and on some phones it works just fine, but others it does not. I am wondering if this code or another needs to be adjusted to suit for a certain screen size, but I'm not 100% sure how best to approach that/what to fix.

I would love some insight and assistance on what could be causing this issue, and how best to resolve it. Any help is very appreciated!!

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 6/21/2023 at 10:09 AM, BrookeP said:

I am having scrolling issues on my client's site when viewed on mobile screens.

I checked the site and I see a number of issues. They appear to be caused by Custom CSS (see screenshot below) but as forum users don't have access to the site, we can't help to troubleshoot.


As a first step, I recommend removing all the custom CSS (save it somewhere safe) and then test it on an iPhone 13 to see if everything works correctly. If it doesn't, contact Squarespace Customer Care and ask them to look at the issue. If it does resolve the issues, this will confirm the CSS as the cause. You can then add a sections of the CSS, save the changes, and check again - until the problems return. This will help you to identify the cause (or causes).

As an aside, the site does not have SSL configured (it is not secure) so you may to enable this too.

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

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.