authenticeye Posted April 6, 2022 Share Posted April 6, 2022 Site URL: https://satsang-with-anasuyaji.squarespace.com/ Hello! A client pointed out today that there is a double image appearing on the mobile view and not on the desktop view The page is https://satsang-with-anasuyaji.squarespace.com/about-anasuya password: anasuyaji When you view the top section on desktop view - there is an image with a faint flower. Yet when you change to mobile view the following happens - in the screen shot I've attached. I've removed the current background image and the mobile style still appears .... a head scratcher for me! Thanks for any thoughts! Or if I need to report it to SqSpace chat Link to comment
tuanphan Posted April 6, 2022 Share Posted April 6, 2022 Hi. On which page? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
authenticeye Posted April 10, 2022 Author Share Posted April 10, 2022 Hi Tuan! Oh my, I missed that you responded! Thank You. The page is "About" Thank You! Rei Link to comment
creedon Posted April 10, 2022 Share Posted April 10, 2022 (edited) The issue is that your ruleset for mobile is using background-size : cover; @media only screen and (max-width: 640px) { #page .page-section:nth-child(1) .section-background img { opacity:0 } #page .page-section:nth-child(1) .section-background { background-image: url(https://static1.squarespace.com/static/6225924e632d443e444e2718/t/6243d4441f7eb5154dc12466/1648612427283/MOBILE+Anasuya+Profile+in+Home+Page+header.pnghttps://static1.squarespace.com/static/6225924e632d443e444e2718/t/6243d4441f7eb5154dc12466/1648612427283/MOBILE+Anasuya+Profile+in+Home+Page+header.png); background-size: cover; background-position: right; background-repeat: no-repeat } } This causes the image to shrink to cover the container, therefor exposing the picture in the lower right corner. From MDN... Quote cover Scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is: both its height and width completely cover the container), leaving no empty space. If the proportions of the background differ from the element, the image is cropped either vertically or horizontally. Also there is a syntax error in your background-image property. But that isn't part of the issue. Edited April 10, 2022 by creedon Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
authenticeye Posted April 10, 2022 Author Share Posted April 10, 2022 Thank You @creedon for your reply. I'm not sure if you fully see my issue. On the about page, I've selected the image in the screen shot for the background. As you can see I did not select the image with the profile circle in the right corner... it's suppose to be the original... Is the mobile code that I used (which is only suppose to affect the home page) somehow affecting the "About" page? Is this making sense? And if your answer addressed the issue - my apologies as I do not follow 🤪 Thank You! Link to comment
creedon Posted April 10, 2022 Share Posted April 10, 2022 The issue is in Design > Custom CSS. Look for the code I showed. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
authenticeye Posted April 10, 2022 Author Share Posted April 10, 2022 @creedon @tuanphan I've adjusted the code as you suggested Creedon, yet as you can see in this screen shot - the image I want displayed only on the Home page in mobile view, is somehow appearing as a default on the About page ... even though - as you can see, I have not selected a "background" image for the section... any thoughts? 🙏🏽 Link to comment
creedon Posted April 10, 2022 Share Posted April 10, 2022 I think I'm seeing the fuller picture now. So you want the home page to look like the following on mobile. And no other pages to take on the profile picture. Correct? If so in Design > Custom CSS change the following. @media only screen and (max-width: 640px) { #page .page-section:nth-child(1) .section-background img { opacity:0 } } #page .page-section:nth-child(1) .section-background { background-image: url(https://static1.squarespace.com/static/6225924e632d443e444e2718/t/6243d4441f7eb5154dc12466/1648612427283/MOBILE+Anasuya+Profile+in+Home+Page+header.pnghttps://static1.squarespace.com/static/6225924e632d443e444e2718/t/6243d4441f7eb5154dc12466/1648612427283/MOBILE+Anasuya+Profile+in+Home+Page+header.png); background-size: cover; background-position: right; background-repeat: no-repeat } ...to... @media only screen and ( max-width : 640px ) { .homepage #page .page-section:nth-child( 1 ) .section-background { background-image : url( https://static1.squarespace.com/static/6225924e632d443e444e2718/t/6243d4441f7eb5154dc12466/1648612427283/MOBILE+Anasuya+Profile+in+Home+Page+header.png ); background-position : right; background-repeat : no-repeat; background-size : cover; } .homepage #page .page-section:nth-child( 1 ) .section-background img { display : none; } } Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
authenticeye Posted April 10, 2022 Author Share Posted April 10, 2022 @creedon Success ! Shwew*. Thank you for bearing with me on that one! Thanks so much! ✨ creedon 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