Change size for Image Banner - Dawn

[MikaelMo]

Hi, 

We need help to change the imagesize for this Image Banner in Dawn template. The size is nice for mobile, but extremely big for desktop. Please see attached. 

[websensepro]

Hi @MikaelMo , kindly provide your store URL please. Thanks

[MikaelMo]

Hi! It's www.livelonger.no

[namphan]

Hi @MikaelMo,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (min-width: 750px) {
    #shopify-section-template--21909981364525__image_banner_QtdVxp .banner {
            max-height: 80rem;
    }
    #shopify-section-template--21909981364525__image_banner_QtdVxp .media > img {
width: auto;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    }
}

[MikaelMo]

Hi, @namphan 

I tried using that code, but it did not work..

[namphan]

Hi @MikaelMo,

I checked and the code is giving me an error, can you check it again?

[MikaelMo]

Hi again, 

I checked, and it's copied straight from the board you sent me..

[namphan]

Hi @MikaelMo,

Can you try to copy it?

@media screen and (min-width: 750px) {
    #shopify-section-template--21909981364525__image_banner_QtdVxp .banner {
            max-height: 80rem;
    }
    #shopify-section-template--21909981364525__image_banner_QtdVxp .media > img {
width: auto;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    }
}

[MikaelMo]

That one did not work either.. 

[namphan]

Hi @MikaelMo,

Can I send you a collaborator invite? it will help me debug everything best

[MikaelMo]

Sure! How do we do that? 

[namphan]

Hi @MikaelMo,

Please send me the collaborator code in private message, I will send you the invitation and check it

[namphan]

Hi @MikaelMo,

Because the current base.css file is an error, it won't work well when added at the end of the file:

I changed it, please check and let me know

[MikaelMo]

Amazing!! How can I make it even smaller? Like these ones. 

[namphan]

Hi @MikaelMo,

You just need to reduce 80rem to 50rem or less, it will work fine as you want:

[PuppyJoyful]

Hi, Namphan

Can you come to my store and check, I want to resize the Desktop Image Banner like this website: https://teazys.com/ , how do I do that, because it currently displays too large on desktop, make sure the image is not cropped when resizing

[namphan]

Hi @PuppyJoyful,

Please send the website link, I will check it for you

[PuppyJoyful]

@namphan website link: puppyjoyful.com