Jump to content

Recommended Posts

Hello all, 

Currently I'm experiencing inconsistencies in my left alignment across my site, as it scales from desktop to mobile. If anyone has any experience with this issue I would greatly appreciate your input. Please see below:

----------

Desktop / Large Monitor Left Alignment:
Formatting is just fine.

Laptop Left Alignment: 
Section title is to the extreme left. (See Laptop Alignment attachment below)

Mobile Left Alignment:
Section title is indented arbitrarily to the right. (See Mobile Alignment attachment below)

Overall:
My assumption is that the grid/grids/fluid engine is somehow inconsistent between these respective sections (section title and related content), as they scale from mobile to desktop experiences. 

Question:
Does anyone know how to resolve this issue?

----------

Thank you! 😊
Robert 

Laptop_Alignment.png

Mobile_Alignment.jpg

strategy, design and technology

Link to comment

Can you share your website URL?

This is probably to do with how you have you sections set up, possibly leaving a blank column on the left and the way that the logo is aligned in the header, by default this is usually 2vw so varies directly with the screen width.

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) 

 Did I help? Buy me a coffee?

Link to comment

Thank you for the feedback. 😊

 

Any idea how to potentially force consistency in alignment, regardless of the grid variances? Perhaps a CSS hack? Ideally I don't want to rebuild everything. 

Thanks again!

strategy, design and technology

Link to comment

Can you share your website URL?

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) 

 Did I help? Buy me a coffee?

Link to comment
1 hour ago, robertgirvin said:

Any idea how to potentially force consistency in alignment, regardless of the grid variances? Perhaps a CSS hack? Ideally I don't want to rebuild everything. 

If you want your content to be left aligned, make sure your blocks are aligned on the same vertical grid line, the left most line in your case? Then check all content within the block is also set to left aligned.

Need to do this in both desktop and mobile edit view.

Have you gone into mobile mode to make sure the alignment is as you want it?

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment

@melody495 Thank you for your feedback. Indeed everything is left aligned across all possible form factors, yet somehow it's inconsistent when testing on the actual devices (outside of the SquareSpace backend). Essentially I've done everything possible I know to do to resolve the issue short of hiring an engineer. Thanks again for reaching out!

strategy, design and technology

Link to comment
41 minutes ago, robertgirvin said:

@melody495 Thank you for your feedback. Indeed everything is left aligned across all possible form factors, yet somehow it's inconsistent when testing on the actual devices (outside of the SquareSpace backend). Essentially I've done everything possible I know to do to resolve the issue short of hiring an engineer. Thanks again for reaching out!

The Recent Strategy Work section is set to Inset, whereas the Mini Cooper section is set to Full Bleed. Hence the padding difference on left and right.

image.thumb.png.0723a8a5ac3da9c4d24ee31f79636243.png

Is your Recent Strategy Work section from one of the templates? You can try add a blank section and add the text block, that section should be Full Bleed.

Hope this helps!

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

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.