Change size for Image Banner - Dawn

Store Design
, , ,
1

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.

MikaelMo_1-1727703014375.png
MikaelMo_1-1727703014375.png590×1280 133 KB

MikaelMo_0-1727702932181.png
MikaelMo_0-1727702932181.png2842×1421 261 KB

1 Like
2

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

3

Hi! It’s www.livelonger.no

4

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%);
    }
}
5

Hi, @namphan

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

MikaelMo_0-1727709399037.png
MikaelMo_0-1727709399037.png2388×1344 239 KB

6

Hi @MikaelMo ,

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

Screenshot.png
Screenshot.png1756×1124 148 KB

7

Hi again,

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

8

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%);
    }
}
9

That one did not work either..

10

Hi @MikaelMo ,

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

11

Sure! How do we do that?

12

Hi @MikaelMo ,

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

13

Hi @MikaelMo ,

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

1.png
1.png1452×992 145 KB

I changed it, please check and let me know

2.png
2.png1542×1070 146 KB

14

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

MikaelMo_0-1727790756748.png
MikaelMo_0-1727790756748.png2488×858 216 KB

15

Hi @MikaelMo ,

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

Screenshot.png
Screenshot.png1572×822 165 KB

16

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

17

Hi @PuppyJoyful ,

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

18

@namphan website link: puppyjoyful.com

19

Hi, Namphan

The google test says I have 5 layout offsets, how do I fix them? This is my website https://mozhixue.shop/

20

Hi @mozhixue ,

Can you describe the errors more clearly? I will check it