Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
MimiDev

Bedford Template causes horizontal scroll on mobile

Question

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.

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 1
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;}

 


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL

 

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0
On 1/10/2020 at 7:07 PM, tuanphan said:

try adding to home > Design > Custom CSS


html, body {overflow-x: hidden;}

 

Worked! yey!

Edited by shaylili

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...