ShootsDraws Posted September 20, 2023 Share Posted September 20, 2023 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! Link to comment
Ziggy Posted September 20, 2023 Share Posted September 20, 2023 There's lots of white space on desktop too: 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. ShootsDraws 1 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
ShootsDraws Posted September 20, 2023 Author Share Posted September 20, 2023 Cheers @Ziggy I didn't realise the white space was displaying on desktop too! Ok, I've now set the minimum height to 100. Are you able to help with the next bit of code to fix the overflow? 🙂 Ziggy 1 Link to comment
Solution Ziggy Posted September 20, 2023 Solution Share Posted September 20, 2023 I'm not seeing any overflow, but if you are you can try this Custom CSS: #collection-5f206fd9f7c6b801081e2cb8 { #page { overflow: hidden; } } ShootsDraws 1 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
ShootsDraws Posted September 20, 2023 Author Share Posted September 20, 2023 @Ziggy Hmm... I've still got excess space on both desktop and mobile after adding the code. Do you have any other suggestions? Link to comment
ShootsDraws Posted September 20, 2023 Author Share Posted September 20, 2023 @Ziggy Sorry, the mobile seems to be ok. It's just the desktop now. Link to comment
ShootsDraws Posted September 20, 2023 Author Share Posted September 20, 2023 @Ziggy I think the image was just too big, so I reduced the size and now all seems good. Thanks for your help! Ziggy 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment