Staff replied SP Page Builder

Parallax Background problem in iphone

Asked by Siam Naulak 5 years ago Last activity 5 years ago

Hi,
I used Parallax Background on my website and it's working perfect in desktop and android phone. BUT, it is not displaying properly in iPhone.

Here's the screenshot - https://prnt.sc/10gx7wj
This is how it displayed in iphone - https://prnt.sc/10gx9hd
This is how it displayed in android phoe - https://prnt.sc/10gxbgi

This is the site - https://www.hopeofharvest2021.org/

Can someone help?

5 replies

Ofi Khan Staff

5 years ago

Hello Siam Naulak

Please share your administrator access here to check. Use the Hidden Content box to share the credentials.

Best regards

Marcelo

5 years ago

Hello!

I have the same problem with Iphone devices.
In any background image.

Can you help me?

Ofi Khan Staff

5 years ago

Please post a new question. Our team will assist you.

blueoceanyyc

5 years ago

Hi,

We have experienced this issue in iphones as well. What we did was use some css to undo the parallax features on mobile devices. We have a very broad setting for all mobile devices. You can of-course fine-tune with your own media queries. The logic we have used is (provided you are using a section background image):

//fix for parallax issue on mobile devices using level 4 media query hover - more info: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Targeting_media_features;
@media (hover: none) {
    .sp-page-builder .page-content .sppb-section {
        background-attachment: scroll!important;
        background-position: center!important;
    }
}

Ofi Khan Staff

5 years ago

Thanks for sharing your solution with us.