The mobile version of my site looks different from the preview in set up

Hello! So, a few weeks ago, I revamped my website to the point where it is now. Everything looked great, all the previews were how I wanted them to be. Today, I randomly decided to check out my website on my phone and it looks nothing like the preview does in the /config loadout when I am working on my site. I hadn't looked at it until now cause the previews were showing everything in order. 

Could I get someone to look at this and 

1. Let me know if it does look messed up on your end as well
2. Help me figure out how to fix this

Thank you!

P.S. - Here's what things look like on my end

The preview of the mobile site via the /config page on my computer

How it looks like when I go to the site on my phone

3 minutes ago, paul2009 said:

Apart from the title being truncated (due to its length), your site is loading correctly on mobile for me (see below). However, I see this wasn't the same for you.

Your screenshot shows what it would look like if the JS and/or CSS content didn't fully load, which can be an issue if using an old or unsupported browser, or where the internet connection is not reliable.

If you are still having the issue on this device, please check which browser you are using (type and version number).

Did this help? Please give feedback by clicking an icon below  ⬇️

Oh, okay! Got it! Thank you so much, that makes me feel a lot better! I'll check those and come back if there's still an issue! I appreciate your help, thanks!

Hi! I am having a similar problem. The mobile preview in squarespace is different from what I really get, is there any solution? 🙏🏼 This is the website: https://www.patasyladridos.com/

1 hour ago, Yenna said:

The mobile preview in squarespace is different from what I really get, is there any solution?

This is normal.

The mobile preview uses an average set of dimensions to allow you to see what it may look like on a "typical" mobile device. However, there are many different screen sizes and resolutions, so it cannot represent all the mobiles in general use. Also, the browser can influence how the page is interpreted, so the site may not look the same on Safari as it does not Chrome.

It's worth checking at a few different resolutions because some visitors will have older (lower resolution) mobiles while others will have the latest, largest smartphone. Here are some examples:

Did this help? Please give feedback by clicking an icon below  ⬇️

That is super helpful, thank you:)

Great reply Paul! I personally will go look at my IPhone after I redesign the mobile version of a site before publishing so I don't have any "surprises" with the layout. 

@paul2009 Regarding your reply above... I'm curious as to how you previewed the site on multiple screen sizes (as your image shows).  SS only gives me 2 choices: desktop or mobile (which as you mention is only an average). I'd like to preview it on different size screens other than the phone I have.

33 minutes ago, patriceacer said:

I'm curious as to how you previewed the site on multiple screen sizes (as your image shows).

Hey @patriceacer 👋

I use a variety of methods but the one pictured is a free, open source tool called responsively.app. Once you’ve used it, you’ll wonder how you lived without it! 😀

38 minutes ago, paul2009 said:

Hey @patriceacer 👋

I use a variety of methods but the one pictured is a free, open source tool called responsively.app. Once you’ve used it, you’ll wonder how you lived without it! 😀

Thanks @paul2009 I knew you would know! I was using developer tools in google chrome and changing the device dimensions from the drop down menu. It was a pain. Thanks for the tip. 

*Update* Wow!!!!! Amazing tool!