How can I disable parallax on mobile only?

JoeF · October 18, 2020

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

Edited October 18, 2020 by JoeF
Removed link to site as it will be deprecated by the time anyone comes across this.

JoeF · October 18, 2020

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.

tuanphan · October 20, 2020

If you use SS 7.1, you can change 640px to 767px

How can I disable parallax on mobile only?

Recommended Posts

JoeF

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

JoeF

Link to comment

tuanphan

Link to comment

Create an account or sign in to comment

News

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources