Pauline-lali Posted October 25, 2023 Posted October 25, 2023 I have this page on my Squarespace website with a background image that displays perfectly on Android and PC but over zoomed and blurred on iOS/iPhone. It's a custom coding so I need help from anyone who has had the same experience or knows how to resolve it. Thank you. Pauline. iamfatima 1
Ziggy Posted October 25, 2023 Posted October 25, 2023 Can you share the website URL and this page, as well as the code? Can't help without that. iamfatima 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?
Pauline-lali Posted October 25, 2023 Author Posted October 25, 2023 @Ziggy https://www.dannyprose.com/projects/nike here is the code for the project page: //Project Theme: Nike: North American Digital Brand; //Add body's collection ID to this selector body#collection-63eb05496c32917ee0e8dd89 { //Theme Varibales @theme-background-color: none; @theme-background-url: "http://dannypalmer.squarespace.com/assets/images/projects/nike-nadb/Project - Nike - NADB.jpg"; @theme-text-color: white; @gallery-image-border-color: none; @theme-navigation-desktop-background-color: #4983a4; @theme-navigation-desktop-link-color: none; //Mobile Background fix background-size: cover !important; background-repeat: no-repeat !important; // background-position: cover cover !important; //what was there before background-position: center !important; //opened when .project-themes(); // background-size: cover } @media (max-width: 575px) { body#collection-63eb05496c32917ee0e8dd89 { background-position: 80% top !important; } }
Ziggy Posted October 26, 2023 Posted October 26, 2023 I'm not sure I see the problem you're having, the background image looks fine on mobile considering what it is on desktop. You have a problem with the URL in this code, you can't have spaces in a URL: I would suggest checking this and putting in the correct working 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! 📈 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?
Pauline-lali Posted October 27, 2023 Author Posted October 27, 2023 If you view the website on Android, there's no issue but if you view it on iPhone and observe the background image, you will see that it's over-zoomed and blurred.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment