Jump to content

How can I perfectly centre an image for all mobile dimensions (with no excess scrollable space)?

Go to solution Solved by Ziggy,

Recommended Posts

Hi,

My Home page consist of a single clickable image (the header and footer are both hidden). I'm happy with how it looks on desktop, but for some reason there is white space at the bottom when viewed on mobile (image attached).

Two questions:

1. Is there are a way to remove this white space?

2. Is there a way to ensure the image and black background fit perfectly across all mobile dimensions without excess empty space? I.e. In its current state, the empty white space reaches beyond the dimensions of my phone screen, resulting in a scroll bar appearing.

Any help would be appreciated. Thanks!

 

Screenshot_20230920_135405_Chrome.jpg

Link to comment

There's lots of white space on desktop too:

image.thumb.png.a119b0291b0b86453bc99de3ff8ad49a.png

You have the section set to a minimum height of 75vh (i.e. 75% of the viewport height), if you set it to 100vh then it will cover the entire screen.

When you've done that you may need to use a little code to hide any overflow to prevent scrolling.

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!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (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
  • Solution

I'm not seeing any overflow, but if you are you can try this Custom CSS:

#collection-5f206fd9f7c6b801081e2cb8 {
  #page {
    overflow: hidden;
  }
}

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!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (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

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.