Users of the Shopify Sense 2.0 theme are experiencing an issue where gradient background colors display correctly on desktop but appear as solid colors on mobile devices (specifically iPhones using iOS and Chrome).
Problem Details:
Attempted Solution:
A support representative (KetanKumar) provided custom CSS code to add to the theme’s base.css file using media queries targeting mobile screens. However, the original poster confirmed this solution did not resolve the issue.
Current Status:
The thread remains unresolved with multiple users reporting the same problem. One user mentions struggling with this issue for six months. The original poster indicates they eventually found a solution with KetanKumar’s help, but the specific working fix was not shared in detail within the visible conversation.
Multiple screenshots and a video were shared demonstrating the difference between desktop gradient display and mobile solid color rendering.
Hi! I am using Sense 2.0 template.
I have selected gradient colors for the page. They look fine in website view, but when I try on my mobile preview they are solid color. Just appear 1 second as gradient and then the colors turns solids.
Do you know what is happening and how to solve it?
pass breneu
We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?
In my mobile doesn´t look gradient colors, they look like solid colors (I use an iphone iOS).
The gradient colors look good just in desktop (both preview desktop and mobile version).
If I try on my mobile phone, they look solids.
In google chrome (iphone)
yes, please add this code
@media only screen and (max-width: 749px) {
#shopify-section-template--15793996038384__rich-text .rich-text, .image-with-text--overlap .image-with-text__content {background: #fd6e5d !important;}
}
Hi!!!
It did not work. I saved a video (attached) on my mobile, just you can see how it looks.
@karolgarza yes, please look on mobile
Thanks!
Picture 1 and 2 are desktop view. You can see the colors in gradient and they change color when you drop down the page.
Picture 3, 4, and 5 are from my mobile (iphone, chrome). You can see there is no gradient, they look just solid colors.
I am looking how to solve in mobile that the colors look in gradient too same as in desktop.
Thanks a lot for your help and pacience.
Did you find a solution? I am having the same problem.
Anybody found a solution for this?
yes! @KetanKumar find it
yes! @KetanKumar find it
Hi how are you today?
I’ve been trying to fix it for six months and I still dont know how :(((
can you please please please help me?
in IOS it still looks solid color and not with gradient colors
