Gradient not showing in mobile - sense theme

[gadea_]

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? 

gradient on desktopgradient doesn't show on mobile

[AvadaCommerce]

Hi @gadea_ ,

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.

[gadea_]

Hi  @AvadaCommerce  thanks for the answer

My store url is: https://gellednails.com/password

the password is: 123456

[premadestores]

Hii @gadea_ 

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.

[gadea_]

Hi @premadestores, thanks for the answer

My store url is: https://gellednails.com/password

the password is: 123456

[LitExtension]

Hi @gadea_,

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!

[gadea_]

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!

[gadea_]

My store url is: https://gellednails.com/password

the password is: 123456

[LitExtension · Accepted solution]

Hi @gadea_,

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.

[gadea_]

Hi @LitExtension worked great! thanks a lot

[alessa_01]

Tried this, but it made all sections gradient even though it's meant to be plain color. How to fix this?

[PGcarvaleting]

Hi there, mine has the same issue even though it shows on the mobile section on theme editor on my laptop.

www.phcarvaleting.com

please could I also get some assistance.

many thanks

[LitExtension]

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.

[mminh]

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: 

https://mminhbijoux.com/

Many thanks

[ZacT]

Was this resolved? Because it does not work for me

[PGcarvaleting]

Hi, I didn’t get a response/assistance, it still isn’t working for me

[lukeyluke]

Where should we add this code?

[ape879sz]

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?

[SpiritualSavage]

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

[lukeyluke]

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