Jump to content

How can I disable parallax on mobile only?

Recommended Posts

Hello,

I have parallax enabled for a banner image (which I like).

However, on mobile, scrolling down the page looks very jittery.

 

I'd like to disable parallax on mobile altogether, while leaving it functional on desktops.

How can I do that? 

 

I've tried injecting the following code into the page header, to no avail:

@media screen and (max-width:640px) {
  .parallax {
    background-attachment: inherit;
  }
}

 

Thanks,

Joe

Link to comment
  • Replies 2
  • Views 2.7k
  • Created
  • Last Reply

I figured out a solution that seems to work, so here goes it for anyone finding this via Google some time later:

______________________

Add the following to Page Settings > Advanced > Header

<style>
@media screen and (max-width:640px) {
[data-parallax-id="PLACE ID HERE"] figure {
transform: none !important;
top: 0 !important;
bottom: 0 !important;
will-change: auto !important;
}
  }
</style>

View this resource to learn how to find the Parallax ID:

https://www.squarestylist.com/blog/overlay-color

_

I will not be following this thread, so if it doesn't work for you: Sorry, godspeed.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.