How can I reduce the banner image size in Studio theme?

[GeeKyuu24]

Hi Team. 

May I please have some assistance in reducing the image banner? I would like to make and display as an image banner in a professional way. 

Store: Glowcare.se
PS: Glowcare1991

[Artzen_tech]

Hello @GeeKyuu24 
Its Artzen Technologies! We will be happy to help you today.

I just had a look at your banner image and got to know that it's way too big to get fit properly.
I can suggest you the CSS to make it small but that will not be good, as the banner might look stretched and will not be suitable for user experience.

I would suggest you to instead of trying any code or CSS, add the small size image for better experience.

Let me know if need further assistance
Regards,
Artzen Technologies

[GeeKyuu24]

What size would you suggest?

[GeeKyuu24]

I already tried to reduce the image size but it still the same. 

[Artzen_tech]

I have seen it will be done through code and you have to do it through code only, if we add any image size it will lead to same size

[GeeKyuu24]

can you please guide me with the code?

[Artzen_tech]

@GeeKyuu24 

Here it is mentioned banner--large class replace it with banner--small class.

This code will be found in the banner section.

Here, I replaced large with small then it looks perfect without any CSS. Refer to below SS.

Try this solution if you are able.

[Parth_]

Hey! @GeeKyuu24 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! 

Thanks for your good question.

 I am agree with @Artzen_tech

if you still want to use this Image.

Please try this Simple CSS code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

@media screen and (min-width: 750px){
.banner--large:not(.banner--adapt) {
    height: 450px !important;
}
}

Thanks! 

[GeeKyuu24]

what would be the recommended size of the image banner? This is the image or at least I can achieve the yellow line

[Parth_]

@GeeKyuu24   Please Try above Given Code, You will get idea automatically about image size, I tried to set 450px height in code you can change according to what you want...

Thanks! 

[GeeKyuu24]

I tried but it did not changed any 😞

[Parth_]

@GeeKyuu24  Try this code

@media (min-width: 751px) {
.banner--large:not(.banner--adapt) {
    height: 450px !important;
}
}

[GeeKyuu24]

Still the same: 

[Parth_]

@GeeKyuu24  Try this in theme customization

[GeeKyuu24]

this is the result: