Image with text overlay won't resize for mobile - Debut

[Shelley_NR]

Hi, can anyone help me, please?

The image I have uploaded into 'Image with text overlay' won't resize at all for the mobile view. Debut theme. I have tried some of the suggestions on here already with no luck.

Thank you in advance.

[diego_ezfy]

Hello,

Thank you for your question. 

Please share your store URL, page URL and also password (if your store has one) so we can help you.

Kind regards,
Diego

[SoigneEveryday]

Hello, 

I am having the same issue, please could you kindly help me to resolve this? 

Many thanks,

Jordana

[KetanKumar]

@SoigneEveryday 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. 😊

Please share your site URL,
So I will check and provide a solution here.

[SoigneEveryday]

Hi KetanKumar
Thank you for your response!
My URL is soigne-everyday.myshopify.com

[ST82]

I'm using Debut. It's gray at the bottom after I added the code. Did anyone get it fixed? Please help, thank you. 

[KetanKumar]

@ST82 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.😊

Please share your site URL,
So I will check and provide a solution here.

[ST82]

Hi, its www.meenatoyz.com thank you

[KetanKumar]

@ST82 

sorry

[ST82]

I have inserted the correct url. Thank you

[KetanKumar]

@ST82 

thanks 

sorry i can't see any issue can you please share issue images?

[ST82]

There's this gray part appearing on top and at the bottom of the image.

[KetanKumar]

@ST82 

sorry for this issue yes, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.hero {background-color: transparent;}

[ST82]

Click to expand...

Thank you very much for helping me fix it. 

[KetanKumar]

Hello, @Shelley_NR 

Welcome to the Shopify community!
and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

[Shelley_NR]

Hi,

Thank you for responding.

URL - naturallyrustic.com.au

Password - RusticNaturally

Main image on the home page is the issue.

Thanks so much. Look forward to a solution to solve this.

Jayne.

[diego_ezfy · Accepted solution]

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

.hero[id]{
    background-size: contain !important;
    height: 41vw !important;
    width: 100% !important;
}

[Shelley_NR]

Thank you dantepw - Worked like a charm.

[diego_ezfy]

You're welcome! Wishing you a nice week.

[Lapellestore]

Hey Diego, i hope you are in good health. I have the same issue that the image won't resize on mobile. i tried your which was given here. but it cuts my image from the bottom and leaves grey space there. I will be very grateful if you can help I have been looking for a solution and it's hectic. Thanks

www.lapellestore.com

My page URL

[Chrissyking]

I applied the solution but now the desktop version has gray areas above and below the image.  Any way to get rid of those?

[ToneGear]

Hi. Having the same issue but I do not see theme.scss.liquid in my assets folder. What do I do? Thank you

[PaulNewton]

@ToneGear you look for a similar main CSS file holding your themes style rules.

It can be named anything, styles.css, main.css store.css etc and varies wildly by theme

[ToneGear]

Thank you. That worked but it shrunk both the desktop and the mobile version way too much. Any idea how to fix that?

[PaulNewton]

---

@ToneGear wrote:

Thank you. That worked but it shrunk both the desktop and the mobile version way too much. Any idea how to fix that?

---

The original solution was for Debut you can't just slap the code in without adapting it for your theme, you'll have to find the proper spot in your theme so it only applies to desktop breakpoints.

[ToneGear]

I understand. I am using the debut theme. It is the main photo at the top that is creating the issue. It’s a photo with text overlay.

[INSTILLBYDESIGN]

Thanks form the future! Huge help! 

[KetanKumar]

@INSTILLBYDESIGN 

it's my pleasure to help us

[SimoneC]

I have the Debut Theme and added the code but nothing changed. My URL is https://bossqueenboutique.com/ Please help!

[KetanKumar]

@SimoneC 

sorry for that issue can you please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
#shopify-section-hero .hero--medium {
    height: 160px;
    background-size: contain;
}
}

[SimoneC]

This worked! Thank you so much!

[KetanKumar]

@SimoneC 

its my pleasure to help us 

[bigdadvibes]

Hello, I am having the same issue is everyone in this thread. I did find where to paste the code, however that code set it permanently to display in mobile view. Is there a way to have the image change sizes to fit the appropriate user whether they are on mobile or web browser. Thanks in advance. 

[albertthe]

Same here. I did pasted the code but when I switched to the mobile view mode, the view got a bit weird as there are gray colors on both above and bottom of the pic. Any help from the admins?

[gnaro]

Hi Diego apparently I have the same issue described. I have used the code listed but it did't work on mobile. 

website link www.nopineappleonpizza.com 

Is there anything else I can do to make it work? 

thanks 

[TemLillie]

Hi,
I have tried all the solutions suggested in here and none have worked. I'm having this exact issue: The image I have uploaded into 'Image with text overlay' won't resize at all for the mobile view on debut theme. Is there anything else I can try? It looks awful.