Gradient Not Showing in Mobile Dawn Theme

[Deathwave]

Hi, I'm using the Dawn Theme for my website. The gradient don't show up on mobile but desktop is okay. I'm not sure why is that happening. Please advise!

url: shopdeathwave.com

[GemPages]

Hello @Deathwave 

I have checked. The gradient background is still work on Android mobiles.

But the CSS code background-attachment: fixed; will not work on Iphone mobiles. This may be the cause of the gradient background not showing.

You can find to other codes for this purpose, like: https://codepen.io/callumfindlay/pen/VaYeoW

Kind & Best regards,
GemPages Support Team

[Deathwave]

Hi Gem,

Thank you for replying back! I found a code that can possibly fix it but when I try to put the code to the custom css it won't let me save and it tells me "Online Store editor session can't be published".

This is the code I'm trying to use
Assets - base.css:
.gradient
background-attachment:" from Fixed to Inherit

[GemPages]

@Deathwave 

If you want to change

background-attachment:" from Fixed to Inherit
Code look like this: 

background-attachment: inherit;

Make sure there are no syntax errors on the changed code.

Kind & Best regards,
GemPages Support Team

[Deathwave]

@GemPages 

I tried again but this time the gradient doesn't flow as you scroll. It became stripes.

 

[GemPages]

@Deathwave 

As I said above background-attachment: fixed; dose not work on Iphone mobiles.
You need to find another way for this effect.

I'm not sure this code will work but you can try:
Go to Online Store -> Theme -> Edit code -> base.css.
Paste the below code at the and of file.

body.gradient:before {
    background: linear-gradient(360deg, rgba(18, 18, 18, 1) 55%, rgba(255, 0, 25, 0.95) 74%);
    content: '';
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

Kind & Best regards,
GemPages Support Team

[Deathwave]

@GemPages 

I just found that out as well...
The code you gave me works for desktop but when I try to view it on my iphone it still doesn't work. I guess I'll have to give up on that design since it's not compatible with IOS. Thank you so much for helping!