Make a Banner / Page width image responsive - Debut Theme - HOW?

[ValMil]

Hi guys,

I am used to the ease of WordPress (I use X Theme) and sometimes I get frustrated by some of the limitations of debt Theme & Shopify

All I want to accomplish is a simple banner that is full width and that will be responsive.

See the blue banner that is on our homepage? https://shop.betterthancoffee.com/

I have used the Image with Text Overlay (deleting the text content) - which i have also used for the other banner, ‘FREE SHIPPING’ - might not be the best way?

My questions:

1/ Despite having the same setting for both images (see screenshots below), one is responsive on a mobile (the free shipping) and the other one is not (Check our bundles…).

I have obviously done something wrong but cannot figure out why

2/ Once 1/ is sorted, I would also like to reduce the white gap above and before the (Check our bundles…) banner. I can see that the Image overlay section in Debut has a set height, what/where do I do to change/add in the code? The challenge is that it should not affect the other banner height…so the banner height would need to adapt to the image. Is this possible?

Some of you will find this easy I did check in the forum but couldn’t find an answer

THANK YOU for your help

Val

[pioneer100]

Please place this code at the end of theme.scss

@media only screen and (max-width: 600px) {
#Hero-1607640974dd4d6129 {
background-size: contain;
}
}

[suyash1]

@ValMil - add following css to the end of your theme.scss file

#shopify-section-1607640974dd4d6129 .hero {background-size: contain;}

#shopify-section-1607640974dd4d6129 .hero .hero__inner {padding: 0;}

[ValMil]

@suyash1 @pioneer100 Thank you both for your answers. It was super useful!

I have actually picked a mix of both codes

@suyash1 if i use yours it has some gaps on the sides, not full width. Not sure why looking at the code…doesn’t make a massive sense…

@pioneer100 if I use yours only then on mobile I have a big grey banner under the image

Final code, in case it can be useful for someone else:

@media only screen and (max-width: 600px) {
#Hero-1607640974dd4d6129 {
background-size: contain;
}
}
#shopify-section-1607640974dd4d6129 .hero .hero__inner {padding: 0;}