CSS backgrond image on mobile doesn't show up

spracto
Visitor
3 0 0

Hello,

 

I have a very simple store I'm setting up for a friend. The preview link is below. The issue I'm having is that my background image doesn't show up on mobile even though I tested it in the browser with mobile sized screen in the dev tools. All desktop browsers work exactly as I want, but on the actual phone the entire top banner is just blacked out, no image, no welcome message.

I'm using the dawn theme and shopify CLI. I've made minimal changes to the code.

I greatly appreciate any and all responses.

 

https://ptooiq7rexutha4q-57530089637.shopifypreview.com

Replies 5 (5)

Kinjaldavra
Shopify Partner
2302 570 1422

hello @spracto   please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file. for showing welcome message in mobile devices  see screenshot https://nimb.ws/Zoz6D7

@media only screen and (max-width: 729px){
#Banner-template--14861211009189__image_banner{
	position: relative;
}
#Banner-template--14861211009189__image_banner  .banner__content.page-width{
	position: absolute;
        top: 50%;
}
}

 

spracto
Visitor
3 0 0

@Kinjaldavra 

I don't have the file "theme.css" in my assets folder but the CSS for the section in my question is "section-image-banner.css" so I went ahead and added the code you provided there. The banner does show up but I'm still missing my logo. Also now the banner is on top of the logo when I'm on desktop.

 

I changed the "top" attribute to 80% and that moved the banner down enough to where it's out of the way now. Logo still doesn't show up on my phone though.

 

It should look like this on mobile:

 

spracto_0-1628140864651.png

 

 

marcoswata
Shopify Partner
122 10 34

It doesn't look like a logo and a banner have been uploaded to the theme, at least not at the moment in the preview link. If you are still having problems, then try uploading them and post the preview here again please

If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, contact me!
spracto
Visitor
3 0 0

@marcoswata 

 

What's odd is the logo shows up for me in the preview when I'm logged in but not when I pull up the preview in an incognito window. I re-uploaded it, no difference.

I'm very confused what is determining whether the logo shows or not...

spracto_0-1628474712009.png

spracto_0-1628475519870.png

 

https://y10v3g20g2ux5aj9-57530089637.shopifypreview.com

 

 

suyash1
Shopify Partner
9078 1129 1479

@spracto - i can see logo in both normal and incognito mode

 

suyash1_0-1628480990412.png 

suyash1_1-1628481003604.png

 

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI