Spacing in mobile view developer is different from how it appears on an actual mobile device.

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

Hiya Folks,

I'm finalizing my website for my Partner and I's wedding. I was excited to see the new layout engine and found it very helpful to really hone in on a layout that I liked. Everything looked good on the Desktop preview, and I loved being able to go in to the mobile preview and independently adjust the content layout to optimize it for mobile.

However, after saving the website and asking my partner to review it on her phone, we noticed that there were some really annoying spacing issues. It seems as though this is mostly when I have used a header. Everything looks fine on the mobile preview on squarespace but when looking at the website on mobile, there is a lot more space after every instance of text that uses my heading. Is there any way I can correct this?

I will attach some side by side images highlighting the difference between the mobile preview on squarespace and how it looks on a mobile device.

If you fancy looking at the website or want to inspect the coding, the website password is: Tulum2023

Cheers

18 hours ago, elrossothematch said:

After saving the website and asking my partner to review it on her phone, we noticed that there were some really annoying spacing issues. Everything looks fine on the mobile preview on squarespace but when looking at the website on mobile, there is a lot more space after every instance of text that uses my heading. Is there any way I can correct this?

The mobile preview is designed to give you a general idea of how your site may appear on a typical mobile device but, in reality, every mobile device has a different window size and so it won't be 100% accurate for every phone.

For example, here is how your site looks on various Apple devices:

Looking at these, it appears that you have resolved your spacing issues now 🙂

How did you ultimately fix the issue? I am having issues with spacing appearing on a mobile devices where there is not spacing on the mobile editor. 

I am having the same issues as well and was not able to fix it. 

The first screenshot is what Squarespace shows me as a preview while the second is what it looks like when published. It's pretty frustrating.

I too am having spacing issues. I have enough space that when they shrink down there should be zero overlap but I keep getting overlaps and resizing. I am on a time limit and I have 40 days to finalize all of this website and this kind of stuff is not ideal. I need feedback , help.