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 |
---|---|
183 | |
169 | |
77 | |
56 | |
45 |
Transform this holiday season into a shopping spree. Plus, learn how to effortlessly open ...
By Jasonh Dec 8, 2023Make the shift from discounts to donations, and witness your business not only thrive fina...
By Holly Dec 4, 2023On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023