Remove Background Image Effect in 7.1 for Mobile

Site URL: http://selflovementoring.squarespace.com

Hey Squarespacers -- I'm getting tripped up a bit on a mobile customization of a site I'm building. I have "Pan" turned on on my header images to give a little of the parallax effect that squarepace decided to eliminate but everyone still wants. Problem is -- when I get to mobile and am trying to switch out the image it's not letting me. If I turn the pan effect off, I'm golden. Any idea how to just turn that effect off on mobile?

selflovementoring.squarespace.com

Password: 1234

CSS in question:

///////////MOBILE///////////
////////////////////////////
 @media only screen and (max-width: 640px){
.section-background img { opacity:0!important }}
  
section[data-section-id="61437bd89d505f3e255212ed"]  .section-background {
background-image: url(https://static1.squarespace.com/static/61437bd69d505f3e25521177/t/61897bd20d3a2a7d63c27850/1636400082171/Mobile+Hompage+Header.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
  }

The bold section seems to be my issue. Any assistance is much appreciated. I'm trying to avoid building duplicate sections and doing the old hide on mobile, hide on desktop as that gets messy when a client takes their site back after dev. 

Thanks!

If the bold portion of the code you shared is the only part of the code in question -- I don't see anything wrong with your code. I'd say that you haven't ended your declaration for property and value in line 2. Although, most browsers are pretty good at knowing how to construct your CSS with out it. I guess it's also possible that you haven't been specific enough with your selector targeting too. 

Perhaps I'm a little confused by your question. Viewing your website, I do not see any panning effects that are occurring and I'm not too sure what you're trying to achieve. Are you having a syntax error in the CSS? Are you trying to turn off pan on mobile by just hiding the image that is panning? Have you injected custom code/javascript to help you do this? 

2 minutes ago, Wolfsilon said:

If the bold portion of the code you shared is the only part of the code in question -- I don't see anything wrong with your code. I'd say that you haven't ended your declaration for property and value in line 2. Although, most browsers are pretty good at knowing how to construct your CSS with out it. I guess it's also possible that you haven't been specific enough with your selector targeting too. 

Perhaps I'm a little confused by your question. Viewing your website, I do not see any panning effects that are occurring and I'm not too sure what you're trying to achieve. Are you having a syntax error in the CSS? Are you trying to turn off pan on mobile by just hiding the image that is panning? Have you injected custom code/javascript to help you do this? 

 

 

So, the code works just fine if I turn the Image Effect off, if it's on it doesn't work at all. I'm asking if anyone has solved this issue previously and/or how do i address the Image Effect in CSS only. 

The image effect MUST be there on desktop, it's a client request to have parallax. 

Thoughts?

Yeah, that's what I meant. I can't help you if the desktop panning effect is not currently on. It's not working for me in Desktop.

In order for me to test any code or provide you with a code or solution to help you, I'll need to work with it in context to your specific issue. 

Note: You won't be able to switch the effect on or off using pure CSS. You'll only be able to disable viewers from seeing it or not.

15 minutes ago, Wolfsilon said:

Yeah, that's what I meant. I can't help you if the desktop panning effect is not currently on. It's not working for me in Desktop.

In order for me to test any code or provide you with a code or solution to help you, I'll need to work with it in context to your specific issue. 

Note: You won't be able to switch the effect on or off using pure CSS. You'll only be able to disable viewers from seeing it or not.

Cool, I just turned it back on. 

@media only screen and (max-width: 640px) {
.section-background-content {
display: none !important;
	}
}

Should disable the effect on mobile and leave you with the original replacement image code you shared above -- resulting in a static image, instead of the panning effect for the image.

THAT WORKED!!! Thank you so much. I have seriously been staring at that for hours trying to figure it out.

Kudos!! 🏆

Glad I could help! 

Hi @Wolfsilon hope you're well? I'd like to remove a section background image and just have plain white.

https://jeanine-thompson.squarespace.com/

password: tuansqsp

Could you please help?

section[data-section-id="6234437c50765b21c219f4a7"]

Hmmm, @Wolfsilon the code you kindly back in 2021 seems to remove my background images entirely on mobile view. Not just the image panning/zoom effects. 

Is there an update to try? 

(I'm trying to improve mobile load speed on kjandco.ca)

On 9/13/2024 at 12:50 AM, KJweb said:

Hmmm, @Wolfsilon the code you kindly back in 2021 seems to remove my background images entirely on mobile view. Not just the image panning/zoom effects. 

Is there an update to try? 

(I'm trying to improve mobile load speed on kjandco.ca)

Which section are you referring to?