Guest Posted November 25, 2021 Share Posted November 25, 2021 (edited) Site URL: https://coconut-saffron-jz7f.squarespace.com/dustin Hello all, I'd like your help with customizing a page - removing a section background image on mobile screen size. The design of the desktop screen looks great but as you scale the screen down to mobile width, the image no longer works as a background. Is there a was to hide the background when it reaches the realm of mobile screen widths? I am able to view the section ID via that Chrome extension, but it addresses the whole section - I want the section to keep (text should stay) just background image photo to be hidden on mobile. The temp password for my site is Lance-2022 if anyone can assist me with this! Your help is appreciated! Attached are visual examples of what's happening. Edited November 25, 2021 by DustinWilliam Link to comment
Solution tuanphan Posted November 25, 2021 Solution Share Posted November 25, 2021 Add to Design > Custom CSS /* Dustin mobile top image */ @media screen and (max-width:767px) { [data-section-id="619ebfc05df22c3512776d59"] img { visibility: hidden; } [data-section-id="619ebfc05df22c3512776d59"] .section-background { background-color: black; } } 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
Guest Posted November 25, 2021 Share Posted November 25, 2021 Thank you so much @tuanphan This worked perfectly! Link to comment
Reuben-Reid Posted February 1, 2022 Share Posted February 1, 2022 Hello All, I've got a client website that I need to achieve something similar to this fix.https://billstream.io I'd like to remove the background images in the 3 x sections that are in the banner carousel on the home page, replacing with the solid teal colour #bcd5d9 as the images just don't work on mobile. What custom CSS would I use for this? Link to comment
tuanphan Posted February 3, 2022 Share Posted February 3, 2022 On 2/1/2022 at 11:00 AM, Reuben-Reid said: Hello All, I've got a client website that I need to achieve something similar to this fix.https://billstream.io I'd like to remove the background images in the 3 x sections that are in the banner carousel on the home page, replacing with the solid teal colour #bcd5d9 as the images just don't work on mobile. What custom CSS would I use for this? I see you figured it out? 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
Iwan Posted May 2, 2022 Share Posted May 2, 2022 On 11/25/2021 at 4:58 AM, tuanphan said: Add to Design > Custom CSS /* Dustin mobile top image */ @media screen and (max-width:767px) { [data-section-id="619ebfc05df22c3512776d59"] img { visibility: hidden; } [data-section-id="619ebfc05df22c3512776d59"] .section-background { background-color: black; } } Hi @tuanphan I'm trying this but it isn't working for me? section[data-section-id="6234437c50765b21c219f4a7"] https://jeanine-thompson.squarespace.com/ password: tuansqsp I want the background plain white Link to comment
tuanphan Posted May 4, 2022 Share Posted May 4, 2022 On 5/2/2022 at 5:34 PM, Iwan said: Hi @tuanphan I'm trying this but it isn't working for me? section[data-section-id="6234437c50765b21c219f4a7"] https://jeanine-thompson.squarespace.com/ password: tuansqsp I want the background plain white I see you solved? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment