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

Store Design
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.

1 Like
2

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

1 Like
3

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.

1 Like
4

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.

5
  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;
}
3 Likes
6

Thank you dantepw - Worked like a charm.

7

You’re welcome! Wishing you a nice week.

1 Like
8

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

9

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

1 Like
10

@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

11

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

12

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.

13

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.

1 Like
14

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

15

Hello,

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

Many thanks,

Jordana

1 Like
16

@SoigneEveryday

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

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

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

1 Like
17

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

18

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

1 Like
19

@ST82

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

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

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

1 Like
20

Hi, its www.meenatoyz.com thank you