Jump to content

Remove Section Background Image in Mobile

Go to solution Solved by tuanphan,

Recommended Posts

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.
 

desktop.png

mobile.png

Edited by DustinWilliam
Link to comment
  • DustinWilliam changed the title to Remove Section Background Image in Mobile
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

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
  • 2 months later...
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
  • 2 months later...
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 

CaptureMob.PNG

Link to comment
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 

CaptureMob.PNG

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

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.