How to fix footer image resizing for mobile view using CSS?

How to fix footer image resizing for mobile view using CSS?

Cangelos772
Excursionist
40 1 12

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? 

Screen Shot 2021-09-17 at 12.01.37 PM.png

Screen Shot 2021-09-17 at 12.02.51 PM.png

Screen Shot 2021-09-17 at 12.07.11 PM.png

Screen Shot 2021-09-17 at 12.06.09 PM.png

    

Replies 7 (7)

KetanKumar
Shopify Partner
37094 3645 12053

@Cangelos772 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Cangelos772
Excursionist
40 1 12
Cangelos772
Excursionist
40 1 12
KetanKumar
Shopify Partner
37094 3645 12053

@Cangelos772 

yes please try this code

#footer .f_mid {
background-repeat: no-repeat;
    background-size: cover;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Cangelos772
Excursionist
40 1 12

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

KetanKumar
Shopify Partner
37094 3645 12053

@Cangelos772 

sorry i can't see please show me 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Cangelos772
Excursionist
40 1 12

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

Screen Shot 2021-09-21 at 1.58.15 PM.png