Hi, I’m using shopify theme Sense on my store and have enabled the feature for moving gradient.
On desktop, the gradient shows up and moves when scrolling, but on mobile it just appears as plain color without any gradient or movement. Any idea on how to fix this, so it looks the same on desktop than in mobile?
Hi @gadea_1 ,
Please share your store URL and if your store is password protected then please provide password too.
So that we can help you.
Thank you.
Hii @gadea_1
Welcome to the Shopify community!
Thanks for your good question.
kindly share your store URL, so that
I will check out the issue and provide a solution.
Hi @gadea_1 ,
Currently, IOS does not support moves when scrolling well, so this is not possible, but you can still display gradients.
Go to Assets > base.css and paste this at the bottom of the file:
@media screen and (max-width: 749px) {
.image-with-text--overlap .image-with-text__content{
background-attachment: local !important;
}
}
Hope it helps!
hi @LitExtension this worked like a charm!
however I see it only works on the image with a text section, is there a way to add the other sections? (I currently have a gradient in the announce section, multicolumn, and email subscription+footer. Would it work if I just add the name of the sections to the code you provided?
Thanks a lot!
My store url is: https://gellednails.com/password
the password is: 123456
Hi @premadestores , thanks for the answer
My store url is: https://gellednails.com/password
the password is: 123456
Hi @AvadaCommerce thanks for the answer
My store url is: https://gellednails.com/password
the password is: 123456
Hi @gadea_1 ,
Please add code:
@media screen and (max-width: 749px) {
.gradient{
background-attachment: local !important;
}
}
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
Hi @LitExtension worked great! thanks a lot
Tried this, but it made all sections gradient even though it’s meant to be plain color. How to fix this?
Hi there, mine has the same issue even though it shows on the mobile section on theme editor on my laptop.
please could I also get some assistance.
many thanks
Hi @PGcarvaleting ,
You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.
Hello! Can I have more specific guidance on how/where to add this code to please? I am not familiar with coding. I also have the same problem with gradient colors only showing on Android and desktop but not iphone. My URL:
Many thanks
Was this resolved? Because it does not work for me
Hi, I didn’t get a response/assistance, it still isn’t working for me
Same issue here, the gradient works just fine in the editor but on mobile the gradient happens across the entire page instead of having that “sticky” feeling
I have the same problem. The gradient appears on desktop, and android, but doest work when I check it on my iPhone. I am unfamiliar with coding. My website url is rave2grave.com. Can I get some help?
Thank you
Where should we add this code?
Hi, my gradients were fine until ios last update. now my gradients are not showing. I used your code and they showed up again but it also put a gradient on my header which I didnt have before. It looks like you see in the picture. It also messes up my android version. Can you recommend a solution please?
