Deactivate Parallax on Mobile

Support
#1

Hey guys,

I need to deactivate parallax backgrounds on mobile devices. I read that this was the default behaviour in the past but I couldn´t find any snippet to deactivate all of my parallax backgrounds in the title section.
I already found those two snippets:

@media ( max-width: 979px ) {[class^="x-bg"][data-x-params*="parallax"] {
background-attachment: initial;
transform: none !important;}}

@media all (max-width: 979px) {.x-content-band.bg-image.parallax, .x-content-band.bg-pattern.parallax, .x-section.bg-image, .x-section.bg-pattern  {background-attachment: scroll !important;}}

But there are still some parallax backgrounds on mobile (e.g. this site). I want to keep them on desktop but like to have them fixed on mobile.
Is there any global option i´ve missed so far? Thanks in advance

#2

Hi @gehess,

Thanks for reaching out.

Your CSS works just fine, I don’t see the parallax effect on mobile view. Perhaps you’re referring to other backgrounds? For the meantime, please make sure clearing your browser cache before testing.

Thanks!

#3

Thanks for your answer! You´re right, tested it with another browser and it works.
Could you please tell me, how to adjust those background images at mobile view? I´d like to center theme and override the parallax settings on mobile view. Tried it with following code, but no effect:

@media all (max-width: 767px) {  .x-section.bg-image, .x-section.bg-pattern {
background-position: cover center !important;    }}

Thanks again!

#4

Hi @gehess,

The background size and position are different. It should be like this

background-position: center center !important; background-size: cover !important;

Hope this helps.

#5

Thanks for your reply. For some reason, the background-images won´t get rid of their center bottom background-position. The image changes at 767 and below from center top to center bottom. (see attachment)
The funny thing is, I didn´t choose this setting anywhere and like to keep the settings like in desktop version
My code is now the following

    @media all (max-width: 767px) {
    .x-content-band.bg-image.parallax, .x-content-band.bg-pattern.parallax {
    background-attachment: scroll !important;
    }
    }

@media ( max-width: 767px ) {
[class^="x-bg"][data-x-params*="parallax"] {
    background-attachment: initial;
    transform: none !important;
}
}


@media all( max-width: 767px ) {
  .x-section.bg-image, .x-section.bg-pattern, .x-bg-layer-lower-image, .x-bg-layer-upper-image{
background-size: cover !important;
 background-position:  center center !important;
}
}

Any help would be great, Because at the moment, this leeds to results which aren´t nice.
Isnt there a easier way to deactivate parallax on mobile and still get those background images positioned?

Thanks!

#6

Hello @gehess,

Please use this code instead:

@media( max-width: 767px ) {
  [class^="x-bg"][data-x-params*="parallax"] {
      background-position: top center !important;
      background-size: contain !important;
      height: 100% !important;
  }
}

Please let us know if this works out for you.

#7

Thank you very much! Just figured out, that the height was the issue! your snippet works fine!!!

#8

You’re welcome!
Thanks for letting us know that it has worked for you.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.