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

Store Design
1

Hi,

I have just created a website and I notice that the image on the main page doesnt change when I go onto the mobile version of my website.

I have seen fixes on here for other sites but when I try and use them it doesnt do anything so I am guessing that these are website specific.

my website - https://www.laurenfrancesca.co.uk/

Can anyone assist? Many thanks in advance!!!

2

@Laurenfrancesca , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
.hero{
        background-size: contain !important;
}

diego_ezfy_0-1649103524781.png
diego_ezfy_0-1649103524781.png397×490 26 KB

Unfortunately this is a well known problem with Debut’s slideshow, they’re not properly responsive. In this particular case, this is the simplest solution for this.

Kind regards,
Diego

1 Like
3

Screenshot.PNG
Screenshot.PNG995×709 48.7 KB

Hi @diego_ezfy !

Thank you for replying - Is the above correct? as it still doesnt view correctly? I have kept the code in. Think I might be doing something wrong

Thanks

4

N @Laurenfrancesca

No problems, it’s missing a } in your code, it should be like this:

} 

.hero{ background-size: contain !important; }

Kind regards,
Diego

1 Like
5

Thanks Diego!!!