How can I adjust the parallax effect for mobile in the Dawn Theme?

Store Design
, ,
1

888.jpg
888.jpg1900×700 60.2 KB

The parallax effect works fine on desktop, but looks awful on mobile.
Can I see the whole picture in parallax effect for mobile? Make it look like the same desktop.

https://scorpius-theme.myshopify.com/

Pass: 1234

Thanks-

1 Like
2

Hi @ Ganara

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

-Go to Online Store->Theme->Edit code

-Asset-> base.css paste the below code at the bottom of the file.

@media screen and (max-width: 767px){

.lunatemplates-parallax.lunatemplates-parallax–template–16892799156523__76d36368-7afd-4e84-861a-fb8a9860b373.LT-parallax-on{

background-attachment:fixed !important;

background-size: contain !important

}

}

PageFlyVictor_0-1668077740211.png
PageFlyVictor_0-1668077740211.png640×1138 75.9 KB

Hope my solution works perfectly for you!

Best regards,

PageFly

3

Hello @Ganara :waving_hand:

Many mobile browsers do not support the parallax effect which uses native CSS property background-attachment: fixed, because it will affect the performance of mobile devices.

So, in short, it is not possible, unfortunately. In mobile devices, it would just show static background which usually looks very bad.

1 Like
4

Ganara_0-1668078297380.png
Ganara_0-1668078297380.png1464×830 87 KB

Thank you very much, but now it’s showing multiple identical images one after the other. What should I do?

5

@Ganara

You need add " background-repeat: no-repeat;" to fix your issue. Your code shoulde be like that

@media screen and (max-width: 767px){

 .lunatemplates-parallax.lunatemplates-parallax--template--16892799156523__76d36368-7afd-4e84-861a-fb8a9860b373.LT-parallax-on{

background-attachment:fixed !important;
background-size: contain !important;
    background-repeat: no-repeat;
}
}
1 Like
6

Hi @Ganara ,

Have you solved the problem? I found that the password has changed. Please share with me the new password if you want us to check and give some suggestions.

Cheers,

Victor

7

Hi @Ganara
In your case, because the mobile devices does not support for the problem background-attachment: fixed.
So in this case better way is add a function support for add separate image on desktop and mobile devices.