Solved

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

Shelley_NR
Tourist
7 0 1

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.

Accepted Solution (1)
diego_ezfy
Shopify Partner
2935 562 883

This is an 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;
}




◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 35 (35)

diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

SoigneEveryday
Visitor
2 0 1

Hello, 

 

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

Many thanks,

Jordana

KetanKumar
Shopify Partner
36839 3635 11972

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

 

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
SoigneEveryday
Visitor
2 0 1
Hi KetanKumar
Thank you for your response!
My URL is soigne-everyday.myshopify.com
ST82
Tourist
6 0 3

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
Shopify Partner
36839 3635 11972

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

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
ST82
Tourist
6 0 3

Hi, its www.meenatoyz.com thank you

KetanKumar
Shopify Partner
36839 3635 11972

@ST82 

sorry

KetanKumar_0-1619468655089.png

 

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
ST82
Tourist
6 0 3

I have inserted the correct url. Thank you

KetanKumar
Shopify Partner
36839 3635 11972

@ST82 

thanks 

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

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
ST82
Tourist
6 0 3

There's this gray part appearing on top and at the bottom of the image.Capture d’écran 2021-04-26 231925.jpgCapture d’écran 2021-04-26 232019.jpg

KetanKumar
Shopify Partner
36839 3635 11972

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

 

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
ST82
Tourist
6 0 3
Click to expand...
Thank you very much for helping me fix it. 

KetanKumar
Shopify Partner
36839 3635 11972

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.

 

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
Shelley_NR
Tourist
7 0 1

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
Shopify Partner
2935 562 883

This is an 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;
}




◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Shelley_NR
Tourist
7 0 1

Thank you dantepw - Worked like a charm.

diego_ezfy
Shopify Partner
2935 562 883

You're welcome! Wishing you a nice week.

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Lapellestore
Visitor
2 0 0

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
Excursionist
12 0 4

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
Tourist
6 0 4

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

PaulNewton
Shopify Partner
6274 573 1319

@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

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


ToneGear
Tourist
6 0 4

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

PaulNewton
Shopify Partner
6274 573 1319

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

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


ToneGear
Tourist
6 0 4
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
Visitor
1 0 0

Thanks form the future! Huge help! 

KetanKumar
Shopify Partner
36839 3635 11972

@INSTILLBYDESIGN 

it's my pleasure to help us

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
SimoneC
Visitor
2 0 2

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

KetanKumar
Shopify Partner
36839 3635 11972

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

 

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
SimoneC
Visitor
2 0 2

This worked! Thank you so much!

KetanKumar
Shopify Partner
36839 3635 11972

@SimoneC 

its my pleasure to help us 

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
bigdadvibes
Visitor
1 0 0

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
Visitor
2 0 1

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?

albertthe_0-1629443695706.png

 

gnaro
Explorer
66 0 17

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
Visitor
1 0 0

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.