Added mobile and desktop banner code causing blurry desktop banner

Store Design
1

Hello,

I added the following code on section-image-banner.css to allow me to add a desktop and mobile image:

.banner__media:first-child {
width: 100%;
}
.banner__media+.banner__media {
display: none;
}
@media screen and (max-width: 749px) {
.banner__media:first-child {
display: none;
}
.banner__media+.banner__media {
width: 100%;
display: block !important;
}
}

However, my desktop image is blurry and I cannot find a way to fix it.

Site: https://cozyspirit.co.uk/

I appreciate your help!

2

hello, @cozyspirit

please use the below code.

@media screen and (min-width: 750px){

.banner–small:not(.banner–adapt) {
min-height:34rem!important;

}

.banner__content {
padding-bottom: 0!important;

}
.banner .banner__media img{
object-fit: contain!important;
}

}

3

I added the code at the bottom of the base.css but unfortunately it hasn’t worked

4

ok, please paste the given code above

@media screen and (min-width: 750px){ .banner--small:not(.banner--adapt) { min-height:34rem!important; } .banner__content { padding-bottom: 0!important; } .banner .banner__media img{ object-fit: contain!important; } }

layout >> theme.liquid

5

I’m sorry mate, this hasn’t worked.

I tested a few things now and it looks like when I remove the banner for mobiles the resolution of the desktop banner is perfect. When I add a second photo (mobile banner) the desktop banner becomes blurry