How can I disable parallax on mobile only?

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

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.

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