Jump to content

Website images won't centre on mobile

Go to solution Solved by Ziggy,

Recommended Posts

Website: www.creativegifts.squarespace.com
Password: cg123

Hello! I'm currently in the stages of creating a new website for a client, however the images are not centred up when it converts to mobile. They all right-align instead of being centred (not too bad on the Squarespace mobile view however on an iPhone 13, they are worse)

I've seen a few have trouble with this too, but used all those codes I could find and nothing works.

Can anyone help? Thank you ☺️

IMG_4877F90C7AF4-1.jpeg

Link to comment
  • Solution

There's a bit of a bug with Squarespace fluid engine that you're exposing here. When you set the column row grid gap to it's "maximum" of 50px, this doesn't scale on mobile, so you end up with a canvas that has a minimum of 8 columns times 50px  which means on screens smaller than 400px the content runs off the right side. On desktop with 24 columns this causes the same problem between 1200px ans 768px wide.

Simply to fix this you need to reduce the column grid gap to 30px or less.

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) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
16 minutes ago, Ziggy said:

There's a bit of a bug with Squarespace fluid engine that you're exposing here. When you set the column row grid gap to it's "maximum" of 50px, this doesn't scale on mobile, so you end up with a canvas that has a minimum of 8 columns times 50px  which means on screens smaller than 400px the content runs off the right side. On desktop with 24 columns this causes the same problem between 1200px ans 768px wide.

Simply to fix this you need to reduce the column grid gap to 30px or less.

You are a STAR - thank you so much!! ☺️

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.