Go into the edit theme code
and find the file component-image-banner.css you can find this file in Assets.
open the file and paste that code at the end of the file and save it.
But in the smaller screen the text will be blurry. Since the text is attach on the image it wont be readable since the image gets smaller.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.image--top .banner__media {
height: 90vh;
}
.image--top .banner__media img {
object-fit: fill;
}
}
And Save.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!