Custom banner resize for different screen size and mobile - Debut theme

[emenain]

Hello,

Would greatly appreciate some help with getting customer banner resized automatically for different screen size. When I upload an image from the free images offered by shopify the banner resizes properly for different screen sizes as well as mobile. I got a custom banner made, and it gets cut off when I resize the screen on desktop and same for mobile.

would appreciate some help with this issue.

website: https://artisstory.com/

password: crahly

Thanks in advance

[Hardik29418]

Hello, @emenain

Please Go to Online Store → Themes → Edit code → Assets → theme.css and paste this code at the end of this file.

@media only screen and (max-width: 450px) {
.hero {
background-size: contain;
height: 101px;
}
}

[emenain]

@Hardik29418 thank you so much

It still doesn’t work if I resize the screen on desktop but it works perfect for mobile.

is it possible to get the image to automatically resize as the desktop screen size changes?

also is it possible to use different image for mobile so I can use bigger font?

[Hardik29418]

@emenain
Please Go to Online Store → Themes → Edit code → Assets → theme.scss.liquid and paste this code at the end of this file.

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

[emenain]

@Hardik29418 The file theme.scss.liquid is not there - please see screen shot.

ere

[Hardik29418]

@emenain theme.css will work.

[emenain]

Thank you so much! it works!

appreciate your help.

[Hardik29418]

@emenain Thank you for the update.

[neeksooo]

Hello im having the same problem but I dont have theme.css or theme.css.liquid. Is there anything i could do?