Gradient Not Showing in Mobile Dawn Theme

Deathwave
New Member
4 0 0

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

Replies 6 (6)

GemPages
Shopify Partner
5588 1261 1203

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.

GemPages_0-1679196908373.png

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

Kind & Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Deathwave
New Member
4 0 0

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
Shopify Partner
5588 1261 1203

@Deathwave 


If you want to change

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

background-attachment: inherit;

GemPages_0-1679198509700.png

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

 

Kind & Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Deathwave
New Member
4 0 0

@GemPages 

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

Screen Shot 2023-03-18 at 9.06.56 PM.png

GemPages
Shopify Partner
5588 1261 1203

@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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Deathwave
New Member
4 0 0

@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!