Jump to content

Bedford Template causes horizontal scroll on mobile

Recommended Posts

I have been given the task of admin on a site and I am totally unfamiliar with SqSp. (I am otherwise a developer that usually develops on other platforms/CMS's)

The issue with the site is that the page is too wide for mobile and causes a chronic amount of horizontal scrolling.

The previous developer apparently found a solution by adding the viewport meta tag to the Custom CSS area! {huh??}. While this does fix the horizontal scrolling issue, it introduces an error in the Custom CSS (of course) and then the standard formatting on desktop/laptop causes the #page content to be narrower than it should be.

The template in use is Bedford and this is the meta tag code added in the Custom CSS area:

<meta name="viewport" content="width=device-width, initial-scale=1">

(I have tried adding this to the 'Advanced' area of Page Settings - and removing it from the Custom CSS, but it has no effect. Still too wide on mobile, but desktop display returns to normal width)

I would love it if anyone more familiar with SqSp might be able to point me in the right direction please. I've tried having a look via browser devtools but I can find nothing.

NOTE: ** if viewing in a browser, only Chrome emulates the mobile display issue correctly. Firefox does not.

The mobile display of the site in SqSp admin also displays correctly.

The site is at robe.com.au

Thanks in advance if anyone should have a look.

Link to comment
  • Replies 9
  • Views 2.2k
  • Created
  • Last Reply

I don't have an answer i'm afraid but I have the exact same issue with my blog posts. I thought comment here with what I have discovered rather than starting a new thread.  I get around 300% horizontal scroll! I'm using a Brine Template (Polaris)

It's only on my google phone using chrome or sometimes in the editor when the mobile option is selected and it only happens while images are loading.  This never used to happen so I'm wondering if it's a recent "update". 

It seems that no matter what size images I upload, the gallery block defaults to loading them at the maximum 2500px and then once they have loaded inserts them at the normal size. Once all images are loaded, the horizontal scroll stops.

If you manage to get any solution to this I will be forever grateful.

Example page - https://www.martynhand.com/blog/best-yorkshire-wedding-photography-2019

Link to comment

Interesting. I guess we'll both get a solution if someone is to post it here 😕

I am viewing mine on iOS (13) and I haven't checked other phones. Will see if I can do that in the coming days.

Let's hope someone might be able to shed some light on the issue

Link to comment
  • 1 month later...
  • 2 months later...
  • 9 months later...
On 2/27/2021 at 10:22 AM, MariaFY said:

Hey @tuanphan

When I use the code to prevent overflow on my Brine site, it removes the sticky header nav. Any ideas how to work around? 

site: https://olive-marlin-t4e7.squarespace.com

pw: circle


Thanks a lot, appreciate if you have a minute!

It looks fine here? Can you add the code then we can check easier?


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


This topic is now archived and is closed to further replies.

  • 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.