Site shifts left and right on desktop and mobile

On 10/17/2022 at 6:04 PM, colbymartin said:

I came here because my mobile site is doing the same thing.

This doesn't appear to be the same issue we usually see. In those cases there is white space outside the viewport but you can scroll to the right.

In your case you have the whitespace but there was no scrolling to the right. So it appears that the main content may have been squished.

I saw it the first time I loaded the site and viewed the mobile view. I then went into diagnostic mode and as I was scrolling down the space, the issue suddenly went away.

I then tried a refresh of the page to get back to base and I'm no longer able to reproduce the issue? Did you solve?

1 hour ago, creedon said:

 

I then tried a refresh of the page to get back to base and I'm no longer able to reproduce the issue? Did you solve?

Actually, yes, I think I did figure it out! I had a code block where I embedded a signup form for my Substack, and I think it was too wide... so when I changed the width (down to like 380?) it seems to have "solved" my problem. Thanks for replying!!

Hi - I tried this code:

html, body {
    overflow-x: hidden;
}

but although it fixed the shifting it causes scrolling issues (as in the site doesn't want to scroll).

Additionally I have another issue where the code I used to force the masonry grid to single column worked but the images aren't centered on the phone, they flush right. Any help with that would be appreciated...

orb-horse-nrf2.squarespace.com

22 minutes ago, Leda_Atomika said:

I tried this code:

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password documentation to understand how it works.

We can then take a look at your issue.

You may find How to post a forum question post useful.

You’re right - I realized I could set a site wide password afterwards - sorry about that. 

And the shifting was caused by an overflow issue being caused by the bottom navigation in the template. Once I made the bottom navigation smaller with the arrows popped back inside the frame and the site stopped shifting side to side when viewed on my phone.

@creedon hoping you may be able to help me too! My site on mobile is able to be dragged left and right but I'm unsure what is causing it. It doesn't happen on my entire site, just on three new pages I have built recently. I've included a link to one of these pages below:

https://sh1ftfitness.net/digital-content

Thanks so much in advance for your help! 

3 hours ago, Sam-B-SF said:

I've included a link

The link you pointed to does not work. Also note the text of the link and the URL are different.

I went to https://sh1ftfitness.net/digital-content and did not see any issue.

Hi @creedon thanks so much for coming back to me. Sorry I edited the link after I posted so that may have been why. This is the correct link:

https://sh1ftfitness.net/digital-content

I've attached a screen recording on mobile to show the issue.  You can basically pull in the left and right sides as you scroll...

15 hours ago, Sam-B-SF said:

You can basically pull in the left and right sides as you scroll...

This is normal browser behaviour.

It is possible to override it with some CSS. I'd recommend not to do it as people have gotten used to the new way browsers have this bounce feature. If you change their experience it takes them out of the moment and give them a odd feeling about your site.

Add the following to Design > Custom CSS.

body {

  overscroll-behavior-x : none;
  
  }

Let us know how it goes.

@creedon thank you for the explanation and code. I've never actually seen this on any other sites and it doesn't do it on majority of my site pages, so I would like to stop it so all the pages are consistent. I tried adding the lines of code you mentioned above but it doesn't seem to have solved the issue. 

Thank you!

11 hours ago, Sam-B-SF said:

I tried adding the lines of code you mentioned above but it doesn't seem to have solved the issue.

I updated the CSS. Please try it agian.

@creedon thank you. That new CSS doesn't fix it either unfortunately 

1 hour ago, Sam-B-SF said:

hat new CSS doesn't fix it either unfortunately 

What version of iOS are you on?

This sounds like iOS/Safari are overriding the CSS.

@creedon iOS 16.2 but I've had a few different people check on their phones and the same thing is happening 

hello, I am having the same problem. I made my site live a few days ago and when I went to view it on my phone it moves from left to right. Also there is a white bar to the right side of the site when viewed on mobile. I have had a look on a few different phones and is the same. Would anyone be able to help me work out how to fix this? my site is:

www.louiseblissful.com

Thank you.

On 8/2/2023 at 6:27 PM, louiseblissful said:

hello, I am having the same problem. I made my site live a few days ago and when I went to view it on my phone it moves from left to right. Also there is a white bar to the right side of the site when viewed on mobile. I have had a look on a few different phones and is the same. Would anyone be able to help me work out how to fix this? my site is:

www.louiseblissful.com

Thank you.

Hi,

Logo is too big so it causes scroll + white bar. You can use a smaller version for mobile logo or use this to Custom CSS box to reduce logo size

/* Mobile logo size */
div.header-display-mobile img {
    max-height: 50px !important;
}

(Just a little experience if you have problems next time.

How I found out the cause: I hided each section with the code one by one, then found that if I delete the header, it disappears. I redisplayed them all, and removed each element in the header and found that the logo was causing the problem)

Hi I am having this issue as well. 

on page load it is fine, but if you scroll left or right or "pinch" on mobile, a white bar appears, which varies in width from page to page.

I adjusted the mobile logo width to below 50px and it didn't work 

On 8/8/2023 at 4:39 AM, bootjackdesign said:

Hi I am having this issue as well. 

on page load it is fine, but if you scroll left or right or "pinch" on mobile, a white bar appears, which varies in width from page to page.

I adjusted the mobile logo width to below 50px and it didn't work 

Can you share site url? We can check easier

Having this same issue please help!!! My site keeps shifting around in mobile can't see the cart

www.samuelreels.com

@media only screen and (max-width: 640px) {
    #block-yui_3_17_2_1_1637592716578_2942.sqs-block-image {
        width:150%;
        margin: auto

On 8/9/2023 at 12:07 PM, SamuelDesigns said:

Having this same issue please help!!! My site keeps shifting around in mobile can't see the cart

www.samuelreels.com

@media only screen and (max-width: 640px) {
    #block-yui_3_17_2_1_1637592716578_2942.sqs-block-image {
        width:150%;
        margin: auto

Add this to Design > Custom CSS

/* Fix mobile shifting */
@media screen and (max-width:767px) {
.header-title-nav-wrapper {
    max-width: 60% !important;
}
}

Thanks Tuanphan.  Also does anyone  have anyone solutions for  removing  AW-1119972099 that sits above the website page? I"m trying to remove it from a clients page.

22 minutes ago, SamuelDesigns said:

Also does anyone  have anyone solutions for  removing  AW-1119972099 that sits above the website page?

This usually indicates errant text in your code injection which causes rendering issues.

I suspect this bit of text is in Settings > Developer Tools > Code Injection > FOOTER. Remove it. Also while you're there, if there is other code, check it's syntax to make sure there are not other errors.

Let us know how it goes.

Thanks Creadon! it worked!

Having this issue too but only on mobile: https://goodlightcreative.com/

Can you help?