My mobile site is not centered- Help!

Site URL: https://www.rebeccahartness.com

Why does my entire site on the mobile version align to the left when I zoom out? It's driving me nuts! I want the whole thing to just be centered all the time without the option of a bottom cursor at all, but I'm not sure how to fix this. Would love some help with this! See attached screenshots.

Hi @Reb_Heart

Are you seeing this issue when you view your site on an actual mobile device? 

According to the Squarespace Guide, "Device View gives you a general idea of how your site appears on a typical mobile browser. It's not 100% accurate for every phone or tablet." So you might find this issue only appears on Device View.

Let me know how you get on.

Hi ! Yes, it does this on actual mobile devices... I even had a friend check and it's the same : ( Any tips??

On 2/22/2022 at 7:48 AM, Reb_Heart said:

Hi ! Yes, it does this on actual mobile devices... I even had a friend check and it's the same : ( Any tips??

Try adding to Design > Custom CSS

html, body {overflow-x:hidden;}

On 2/27/2022 at 3:31 AM, tuanphan said:

Try adding to Design > Custom CSS

html, body {overflow-x:hidden;}

 

I had the same problem, and this worked for me. Thank you!

On 4/21/2023 at 4:05 PM, Assad said:

•  

I have a similar problem, whenever it's viewed on mobile the text that should be aligned in the center appears to be shifted to the right, could anyone please help?



https://swan-coyote-5l6c.squarespace.com/

pw = bongo

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.fe-643d37df5d41246dce6a7211 {
    grid-column-gap: 20px !important;
}
}

On 2/27/2022 at 1:31 PM, tuanphan said:

Try adding to Design > Custom CSS

html, body {overflow-x:hidden;}

 

I've added this code, it has fixed the content  - But Header Hamburger menu is still pushed left. Any tips?
thanks 

On 1/11/2024 at 4:17 AM, DamonCameron said:

I've added this code, it has fixed the content  - But Header Hamburger menu is still pushed left. Any tips?
thanks 

What is your site url?

Hi @tuanphan,

https://www.photosbydamon.com/

Many thanks 

On 1/20/2024 at 4:23 AM, DamonCameron said:

Hi @tuanphan,

 

https://www.photosbydamon.com/

 

Many thanks 

It looks fine to me on homepage

My phone its way off. Your's is not 100% either...

You mean mobile burger or page content?

I seem to be having the same problem but none of the code above has fixed it... I'm currently redesigning my website for mobile (duplicating every section and using @media only screen and(min-width:641px) {[mobile-data-section-id]{display:none}} @media only screen and (max-width:640px) {[desktop-data-section-id]{display:none}}). On Squarespace, the mobile layout looks good (image 1), but on my actual phone it looks as if it's pushed to the left (image 2)!

On 2/7/2024 at 2:18 AM, manumuniz said:

I seem to be having the same problem but none of the code above has fixed it... I'm currently redesigning my website for mobile (duplicating every section and using @media only screen and(min-width:641px) {[mobile-data-section-id]{display:none}} @media only screen and (max-width:640px) {[desktop-data-section-id]{display:none}}). On Squarespace, the mobile layout looks good (image 1), but on my actual phone it looks as if it's pushed to the left (image 2)!

What is page url? We can check problem easier

Having a similar issue. My products won't center on mobile. None of these codes worked thus far. No settings in mobile seem to change anything. I was trying to add a second column. Nope. Perhaps I have another code overriding? 

On 3/23/2024 at 12:31 AM, Delightfulglass said:

Having a similar issue. My products won't center on mobile. None of these codes worked thus far. No settings in mobile seem to change anything. I was trying to add a second column. Nope. Perhaps I have another code overriding? 

 

 

You can share link to this product, we can check and help you easier

I have having the same problem: www.sfblocks.com/bernalheights. And I tried the above 2 code suggestions.

On 6/12/2024 at 1:44 AM, aea-sf said:

I have having the same problem: www.sfblocks.com/bernalheights. And I tried the above 2 code suggestions.

The page url doesn't exist

Hi, 
I have the same issue on mobile. The page looks well-centered on the preview, but misaligned when accessed from real mobile devices.

The custom CSS from above didn't help.

Could you please check: buttercupandrobot.com/links

1 hour ago, Xeni said:

I have the same issue on mobile. The page looks well-centered on the preview, but misaligned when accessed from real mobile devices.

You have extra white space in your text. Check both text blocks and remove empty white space for "3D Files" and "Commercial License".

Let me know how it goes.

7 minutes ago, melody495 said:

You have extra white space in your text. Check both text blocks and remove empty white space for "3D Files" and "Commercial License".

Let me know how it goes.

Hi Melody, thank you for your prompt response.
That's correct, I have included the spaces to compensate for the misalignment. Not the best workaround for sure, but I was trying to make it look a bit better.

I have now removed the spacing. Could you please check the mobile page again? 

Here is what I see:
 

15 minutes ago, Xeni said:

I have now removed the spacing. Could you please check the mobile page again? 

It looks perfectly centred for me 🙂 

I noticed you are opening your website from Instagram, so it's using Instagram's browser. Websites (not just Squarespace) are known to look different with internal browsers from Instagram, Facebook etc, as far as I know, there is nothing you can do about it.

If you open in "External browser", you should see your website as my screenshot below.

@tuanphan I'm having a weird issue with a new page I am creating. When i go into Mobile View to design the page, the width of the usable area goes beyond the width of the visual working area. And i cannot get the content centre. 

Screen recording here to see what I'm talking about:
https://www.dropbox.com/scl/fi/2nac77wg45rbpznu3l5af/Damon_Screen-Record.mov?rlkey=xoasxaj8sr4rdagu9c8xwnsl2&dl=0

It does not occur on any other pages.

Troublesome page 
https://www.photosbydamon.com/welcome

Normal page
https://www.photosbydamon.com/

 

On 9/18/2024 at 5:23 PM, DamonCameron said:

@tuanphan I'm having a weird issue with a new page I am creating. When i go into Mobile View to design the page, the width of the usable area goes beyond the width of the visual working area. And i cannot get the content centre. 

Screen recording here to see what I'm talking about:
https://www.dropbox.com/scl/fi/2nac77wg45rbpznu3l5af/Damon_Screen-Record.mov?rlkey=xoasxaj8sr4rdagu9c8xwnsl2&dl=0

It does not occur on any other pages.

Troublesome page 
https://www.photosbydamon.com/welcome

Normal page
https://www.photosbydamon.com/

 

Hi,

I see site is fine now?