Jump to content

Site looks terrible on mobile and doesn't resize to smaller screens

Recommended Posts

I just completed my website apart from replacing a few photos here and there. When I view it on my MacBook (16") it looks perfectly fine. Nothing is outside the grid in edit mode so I figured it would be fine. However, when my friend views my website on her laptop which is slightly smaller (14"), things seem to be pushed together and don't align properly. I tried moving things more towards the center which did not fix the problem (pictures attached). Is there a code I should attach so my site looks the same on every laptop/desktop? If so, what is it/how do I go about doing that? I am very new to Squarespace and this is my first website through them. In the pictures you can see that the text doesn't align in one line as it should and the icons for social media don't align either.

Summary: Squarespace said it resizes to every size of screen but is not doing so and mobile version looks nothing like my site. 

URL: https://www.captivating-portraits.com

image001.png

image004.png

image005.png

image006.jpg

Screen Shot 2023-02-12 at 4.44.04 PM.png

Screen Shot 2023-02-12 at 4.44.11 PM.png

Screen Shot 2023-02-12 at 4.44.16 PM.png

Link to comment
  • Replies 3
  • Views 5.6k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi @JuliaMotl I hope I can help you here, but some of the block problems I can see might be tricky to explain written down. 

Firstly with this latest version of Squarespace the mobile layout is disconnected from the desktop layout and needs you to go through and design it, if you haven't done that then the block order will simply be the order you created the blocks. As a note, when you make changes in the future, be sure to edit the desktop site, and then check and adjust the mobile layout every time.

The first picture seems to be text wrapping as the block becomes too narrow, this is tricky to get right with the way you have designed it to look, and generally requires you to give far more space around the text to try and account for the page narrowing. As the page narrows it simply reduces the width of every column proportionally, so accounting for how this will effect the layout and text is important but tricky!

The second picture appears to show that you have two text blocks that overlap, so when the text $2000 wraps to the next line it covers text in the next block. To solve this, try not to overlap text blocks, and make them as wide as you can so they are less likely to get too narrow and wrap to the next line (this doesn't work on paragraph text but blocks with centered headlines should be wider where possible).

The third picture suggests that you either need smaller headings or you should go slightly against my previous comment and in this case allow that text block (Photography) to be wider and overlap the accordion (if you don't mind that look on smaller screens).

The other images are all mobile layout not being edited manually as described above.

If you want some more help, you could schedule a quick call/ screen share and I can run through a few pages with you and give more detailed thoughts on my opinion of best practice for "Fluid Engine". (check my signature for my website and go to schedule).

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

I've just seen this section, and noticed you have two areas of text in the same block (highlighted yellow) with paragraph breaks to separate them. This will cause problems on desktop and mobile for layout, but can be improved easily by breaking them up into two text blocks.

image.thumb.png.fd7490089aa716a98b0e7b23b351a54b.png

This is also a problem on large sceens:

image.thumb.png.ee120ce3fda1a692244cd3dc7883ae28.png

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

This section is where making the text blocks as wide as possible would be helpful:

Current block size:

image.thumb.png.9c4d97a383fcbf6a050c9fc6ea3864d0.png

Proposed block size so they scale better on narrow screens:

image.thumb.png.c1f05b302cbe164d8c158c08fde4656f.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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.