Image banner height on mobile

zimey
Tourist
19 0 2

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

Screenshot 2024-05-10 at 20.00.08.png

 

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

Thanks in advance.
best regards.

Replies 7 (7)

Made4uo-Ribe
Shopify Partner
6394 1535 1905

Hi @zimey 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
zimey
Tourist
19 0 2

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
Shopify Partner
6394 1535 1905

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

Made4uoRibe_0-1715376922137.png

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
zimey
Tourist
19 0 2

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

RBilal
Shopify Partner
19 2 0

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;
}

}

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
email: ahmadbilalrana98@gmail.com
zimey
Tourist
19 0 2

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

RBilal
Shopify Partner
19 2 0

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

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
email: ahmadbilalrana98@gmail.com