Dawn Theme: Image banner does not sale to fit

Store Design
1

I just went live with the Dawn theme, but the image banner does not seem to scale to fit the first and second image but rather crop it to fit. This differs for different aspect ratios.

How may I scale the images so that both always fit within the space.

This is our site: https://suorix.myshopify.com/

88473.jpg
88473.jpg1668×2224 188 KB

image_2022-04-07_164530394.png
image_2022-04-07_164530394.png3764×1870 492 KB

I also have image stacking so that when viewed on mobile it would look like this:

image_2022-04-07_164935485.png
image_2022-04-07_164935485.png762×1780 161 KB

Can I set the width of the screen required in which image stacking takes place, so as to make the images stack when on mobile or when holding an IPad portrait, but not to stack when viewed on a desktop or when holding an IPad landscape.

Sorry for the hassle

Any advice would be appreciated!

1 Like
2

@TheOneFaze

Add the following CSS code to your assets/section-image-banner.css bottom of the file.

@media screen and (max-width: 749px){
.banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--large.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media {
    height: 29rem !important;
}
}

Thanks!

3

@TheOneFaze

Second solution

Add the following CSS code to your assets/section-image-banner.css bottom of the file.

@media screen and (max-width: 749px){
.banner--stacked .banner__media-image-half {width: 100%; background-size: contain;}
}

Thanks!

4

Hello @dmwwebartisan ,

Unfortunately the CSS code did not work. Attached is the CSS code for the Image Banner Section.

Thanks.