Jump to content

How can I disable parallax on mobile only?

Recommended Posts


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;




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

@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;

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



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

Link to comment


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.