Docs

[ranger]

I was wondering if you guys had some css rules handy so that I can replace the background image I used in Parallax section with a different image when on mobile (and Parallax is disabled). I was hoping I wouldn’t have to dig through the CSS to figure it out.

Thanks

[Rupok]

Hi there,

Thanks for writing in. You can use CSS like this :

#x-section-1 {
  background-image: url(//path/to/your/image.png)!important;
}

Let’s use the correct section ID and replace the image path with your own uploaded image.

If you still need help; kindly provide your URL and point us the section.

Cheers!

[ranger]

Thanks for the answer, but that doesn’t come close to resolving what I asked about.

It is easy to replace an image via CSS, either through that method or using a user defined class.

However, I want to replace an image only for mobile.

When I have a Parallax section in a browser on desktop and I resize the browser the Parallax effect remains active right down to the smallest width. There are CSS rules in place for disabling Parallax mobile only, and I would love if you guys knew them so I didn’t have to try and hunt them down. I’m actually trying to figure out how since the Chrome Inspector doesn’t work (as noted, Parallax remains active on a desktop browser).

[Joao]

Hi There,

Please try the code below, it will affect just devices smaller than 480px which should be all the mobiles only.

@media only screen 
and (max-device-width : 480px) {
#x-section-1 {
  background-image: url(//path/to/your/image.png)!important;
}
}

Hope it helps

Joao

[Author]

Posts