Return to previous page

‘Parallax’ effect doesn’t work in mobile. Please advise.

This topic has 4 replies, 2 voices, and was last updated 11 months ago ago by Luca Rossi

Sweet D

Participant

January 21, 2024 at 20:36

I have a page on my website called ‘info’. It uses the template from your theme called ‘Parallax Presentation’. It works fine on a computer, and I have created a part to the page specifically for mobile. But for some reason the ‘Parallax’ effect doesn’t work in mobile. Please advise.

Please, contact administrator
for this information.

#380822 Copied Theme version: 9.2.5 WooCommerce version: 6.4.2

3 Answers
Luca Rossi

Support staff

January 22, 2024 at 09:04
Dear Sweet D,

We hope this message finds you well.

We would like to inform you that the parallax feature is intentionally disabled on mobile devices within the XStore theme. This is a deliberate design choice and not a malfunction of the theme.

The parallax scrolling effect is achieved by setting the background image position to “fixed” (background-attachment: fixed). At present, this effect is fully supported only by the Mozilla Firefox browser.

On touch devices using browsers other than Mozilla Firefox, the parallax effect is overridden to ensure compatibility. Consequently, users will observe a static image in place of the dynamic parallax effect.

The majority of mobile browsers do not support parallax scrolling due to issues related to responsiveness and performance concerns on mobile devices.

However, we have provided a workaround using custom CSS code. Please be aware that this custom CSS solution will not function on iOS devices. The following custom CSS has been added for your convenience under Page Settings > Advanced > Custom CSS:
```
@media only screen and (max-width: 768px) { 
    .elementor-widget-wrap.elementor-element-populated.lazyloaded {
        background-attachment: fixed !important;
    }
}
```
Should you have any further questions or require additional assistance, please do not hesitate to reach out.

Best regards,
The 8Theme Team
#380850 Copied
Sweet D

Participant

January 22, 2024 at 19:51

Ok that’s great. Are we able to do the same to allow the pc layout to work on tablets as well?

#380932 Copied
Luca Rossi

Support staff

January 23, 2024 at 05:53
Hi @Sweet D,

We’ve changed the custom CSS codes to this:
```
@media only screen and (max-width: 768px) { 
    .elementor-widget-wrap.elementor-element-populated.lazyloaded {
        background-attachment: fixed !important;
    }
}
```
Now it’s working on tablets also. Please double check again.

Best regards,
The 8Theme Team
#380938 Copied
Tagged: expert advice, mobile compatibility, parallax effect troubleshooting, responsive design solutions, theme fixes, woocommerce parallax issue, wordpress woocommerce themes
Viewing 4 results - 1 through 4 (of 4 total)