Parallax Section Not Showing Up On Mobile

Support
#1

Hi,

I have a page, newfoley.wpengine.com/maintenance and the top section’s background image does not show up when I look at it on my mobile device (iPhone 8 Plus). Same thing for some of the other pages with the same thing.

I’m using the Parallax affect on the lower layer, setting it to 100, and then adding the following CSS:

.parallax [class^=“x-bg”][data-x-params*=“parallax”] {
background-attachment: fixed;
}

It works beautifully on Desktop but when I go to mobile or iPad it stops working.

Can anyone help? Thanks.

#2

Hello Gregory,

Thanks for asking. :slight_smile:

I checked the website on my end and it seems to be working fine. I can see background image for the top section. Can you please try to clear the cache of the mobile browser can see how it goes?

Thanks.

#3

I just tried that and it did not work.

I’m using an iPhone 8 Plus. Any chance you were using Chrome Developer tools? It shows up for me on Developer Tools when I make it simulate my phone, but when I actually go to it on my phone I get nothing.

I have a similar problem on the last section of the home page where it says “build the pool of your dreams” except the image is there but zoomed way in.

#4

Hi There,

Please turn off the native parallax option in the section, and update your CSS code to this:

.x-section.parallax .x-bg-layer-lower-image {
	background-attachment: fixed;
}

Then clear your browser’s cache.

Let us know how it goes,
Cheers!

#5

So now the image shows up, but it’s super blurry.

#6

It’s not a huge deal since I can just set up the sections to hide on mobile and then make a different section that isn’t like this, I just felt like there was probably a fix that made this problem go away.

#7

Hi There,

Can you test it on another phone? I can’t replicate that blurring issue on my end. Your background-image were big enough to look great on wide-screen much more on a mobile screen.

Thanks,

#8

I’ve tried it on my phone and my iPad mini 4 and get the same result.

#9

Hi,

I checked in mobile and can see that the background is not showing up.

Please remove the css that you have to make the background attachment fixed.

Then try to increase the percentage of the lower layer size.

If that doesn’t work, please provide us your wordpress admin login in Secure Note

Thanks

#10

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