Jump to content

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

Recommended Posts

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

WebMobile_01.jpg

WebMobile_02.jpg

WebMobile_03.jpg

WebMobile_04.jpg

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

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:

image.thumb.png.03ed86ff320a277be0a8e97f6677a54d.png

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

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 1 month later...

Create an account or sign in to comment

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


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.