Fixed parallax not working on mobile/ipad

Hi. I found some code (somewhere in this forum) in order to fix the parallax background (so that the section below rolls over it.

It’s fine on desktop but it’s not working on mobile or iPad. Can you help?
It can be seen here on this page - https://www.peacheseskbank.co.uk

The password to access beyond the holding page is - construction

Hello @Lorenmn,

Thanks for writing to us.

It seems that you have set padding-top and padding-bottom 500px of the line element. because of that in small devices, it is getting almost 1000px height. I would suggest you set the padding-top and padding-bottom in the VW unit so it would get responsive height background image work properly in small devices as well.

If it doesn’t work for you, please share your details in a secure note. Please provide the following details

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

Ah, yes, I had a ‘gap’ element in the section to give it some room. I’ve removed it and modified the top and bottom padding instead. BUT it still doesn’t work on mobile or iPad.

I’ll add login details.

Hello @Lorenmn,

Revert the padding of your section to 45 pixels.

In your column settings, set a minimum height of at least 420 pixels instead of using 20%.

This should give you enough space for smaller screens. Hope this works out for you.

Ok. That seems okay, BUT, it’s not working on mobile! The parallax doesn’t move. Not on iPad either.

Hi @Lorenmn,

I have checked your website on my Android mobile phone and also in other devices like iPhone and iPad using Browser Device Tool and found the parallax is working fine. Can you please check once by clearing your mobile browser cache? If it does not resolve this issue, please mention the device, browser name and version, and also the operating system you are using, which helps us to replicate the issue at our end.

Thanks

Hi,
Definitely not working. Not on my iPhone 11 with safari, or my iPad air or my clients iPhone. I’ve cleared the cache. I’ve also tried Chrome on my iPhone - still not working.

I’ve attached a screenshot.

It’s just an enlarged, non moving image.

Hello @Lorenmn,

In iPhone screens, it should look something like this:

Please install Chrome or Brave browser on your phone and test your site again. I have a hunch that Safari is caching the site or does not render the background correctly.

Kindly let us know how it goes.

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