Mobile Parallax Issues

I have two Parallax sections on the front page; one “background full” and one “background small”.They work beautifully on desktop but I noticed the parallax effect isn’t working on mobile (Android Chrome, latest version). Both are static, but “Full” one shows a cropped version of the image while the “Small” one shows a full width version that’s only cropped vertically.

As a related question, if cropping is going to happen, is there any way to have it crop the left side first, leaving the right in view (in the image in question, this would mean the figure wouldn’t be cropped out, but the blank dark space on the left would)?

Website is: http://trevortaylor.net

Spent a week trying to figure out what could be causing this and still no luck.

Hey there,
Hope you’re doing well today

For the issues, Kindly add and save the following code to Appearance > Customize > Additional CSS:

@media(max-width:550px){
.parallax-window{
background-attachment: fixed!important;
background-position: right!important;
}}

I hope this helps :slight_smile:

Best Regards,
Support

That tweaks the positioning of the first parallax image (thanks!) but the parallax scroll effect still isn’t working on either the Large or Small Parallax sections.

Hi there,
Thanks for keeping in touch with us.

Parallax isn’t actually a feature that is used on mobile, see the Shapely demo site:
https://colorlib.com/shapely/
The closest you could get to parallax is a fixed background image which I’ve provided the code for in my previous response.
Sorry about that.

Best Regards,
Support

Ah, I see. The Customizer mobile preview showed it as working so I assumed it should. Never thought to check the demo site on my phone.

Hi there,
Thanks for keeping in touch with us.

The thing with the customizer is that it’s basically your browser resizing to fit mobile devices so most of the desktop scripts are actually still running when the screen is resized so it doesn’t show accurately.

Sorry about that.

Best Regards,
Support