Hi, can anyone help me activate the parallax effect on mobile view? I’ve enabled it in the theme customizer, but it’s not working on my phone.
my store: https://hera-theme.myshopify.com/
pass: hera
Topic summary
A user is trying to enable the parallax effect on mobile devices for their Shopify store using the Dawn theme, but it’s not working despite being enabled in the theme customizer.
Root Cause Identified:
- The issue stems from sections obtained from Luna Templates, not the Dawn theme itself
- The code includes CSS rules that intentionally disable parallax on mobile devices
Technical Explanation:
.LT-parallax-onusesbackground-attachment: fixedfor the parallax effect- A media query
@media only screen and (hover: none) and (pointer: coarse)detects mobile/touchscreen devices - This query overrides the effect with
background-attachment: scroll, turning off parallax on mobile
Why This Exists:
- Fixed backgrounds typically don’t work well or look bad on mobile devices
- Browsers either ignore the rule or create jagged scrolling on touchscreen devices
Potential Solution:
- Commenting out the second CSS rule may enable mobile parallax, though this could cause performance or visual issues
The user expressed gratitude for the explanation.
It’s not about Dawn, but about sections you’ve got from Luna Templates.
Section code includes these CSS rules:
.LT-parallax-on {
background-attachment: fixed;
}
. . .
@media only screen and (hover: none) and (pointer: coarse){
.LT-parallax-on {
background-attachment: scroll;
}
}
First rule tells the browser to implement fixed background for parallax effect.
But second one turns this off for mobiles (devices with touchscreen and no mouse).
The reason for this is that fixed background usually either not working or bad looking on mobile devices – browser either ignores first rule or scrolling becomes jagged.
If you want to try it – comment out the second CSS rule.
1 Like
thank you so much