Jump to content

Remove Background Image Effect in 7.1 for Mobile

Recommended Posts

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!

Link to comment

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? 

 

 

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

Link to comment

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.

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

Link to comment
  • 5 months later...

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.