Bedford Template causes horizontal scroll on mobile

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.

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

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

Is there anyone that might be able to shed light on this??  ...please 🙂

14 hours ago, MimiDev said:

Is there anyone that might be able to shed light on this??  ...please 🙂

try adding to home > Design > Custom CSS

html, body {overflow-x: hidden;}

On 1/10/2020 at 7:07 PM, tuanphan said:

try adding to home > Design > Custom CSS

html, body {overflow-x: hidden;}

 

Worked! yey!

This worked BUT it made a black box appear over the mobile navigation.

12 hours ago, theresa.southern said:

This worked BUT it made a black box appear over the mobile navigation.

 

Can you share link to your site? I will take a look

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!

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?