Shopify themes, liquid, logos, and UX
So I added a background Image in my footer but when it goes to mobile sizing, it looks completely different. How do I css code it to look the same. I've tried responsive, position relative, etc, I believe in the theme its set as a flex container. Unsure what to try. Images of code as well as whats going on as reference. Im more worried about the background image responding that way than I am the text blocks acting that way. BUT i would eventually like to clean that whole section up. ALSO, I have setup lazysizes on the homepage EXCLUDING this image, how would I add that in to this image?
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
yes please try this code
#footer .f_mid {
background-repeat: no-repeat;
background-size: cover;
}
@KetanKumar so, that DID work, but how the footer expands vertically, it leaves this huge whitespace after the image. Do you know if i can set it so when the site is set in moble it changes the background to a simple grey to compensate for this?
sorry i can't see please show me
@KetanKumar I took it off as a lot of our users on the site are mobile. Is there a way to state that once browser size reaches a certain point, that image is subbed out or overlayed with just a grey color?
User | RANK |
---|---|
225 | |
168 | |
65 | |
54 | |
53 |
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023