Image banner height on mobile

[zimey]

Hello team, i am working on my website https://www.guldklippet.se/
How do i increase my height on the image banner on mobile? check picture below

On vanbruun their picture goes well below mine, is it possible to fix on shopify?

Thanks in advance.
best regards.

[Made4uo-Ribe]

Hi @zimey 

I cant find your image banner in your store. Would you mind to share the preview? Thanks!

[zimey]

Yes you are right, im working on a copy right now!
https://0qojt8k4rp3i20fd-63212585196.shopifypreview.com

There is the link with the image banner! Thank you!

[Made4uo-Ribe]

Thanks for the info, the result will be like this. 

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!

[zimey]

Thank you so much for helping me, but it seems like the code isnt working... any idea what can be wrong?

[RBilal]

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.

@media(max-width:767px){
.image--top .banner__media{
  height: 450px;
}
}

[zimey]

Hello, thank you for helping me!
Its seems like the code dosent work... any idea what it can be?

[RBilal]

Can you show me the screenshot where you added the code?