CSS backgrond image on mobile doesn't show up

spracto
New Member
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

0 Likes
Natztech
Shopify Partner
1891 492 1172

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%;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
spracto
New Member
3 0 0

@Natztech 

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

 

 

0 Likes
marcoswatanabe
Shopify Partner
20 2 5

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, talk to one of our experts at https://whymatters.co.uk/
0 Likes
spracto
New Member
3 0 0

@marcoswatanabe 

 

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

 

 

0 Likes
suyash1
Shopify Partner
3245 363 532

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

 

suyash1_0-1628480990412.png 

suyash1_1-1628481003604.png

 

 

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes