Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How can I disable parallax on mobile only?


JoeF
Go to solution Solved by JoeF,

Question

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 by JoeF
Removed link to site as it will be deprecated by the time anyone comes across this.
Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0

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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...