Changed the collection image to full site witdh and it gets blurry

Store Design
,
1

I have changed the collection image size to full width with this code :

@media screen and (max-width: 749px) {
.collection-hero__image-container {
height: 20rem;
}
}

@media screen and (min-width: 750px) {
.collection-hero–with-image .collection-hero__text-wrapper {
padding: 4rem 2rem 4rem 0;
flex-basis: 50%;
}

.collection-hero__image-container {
align-self: stretch;
flex: 1 0 50%;
margin-left: 3rem;
min-height: 20rem;
}
.collection-hero__inner .collection-hero__text-wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 0;
margin: 0;
flex-basis: 100%;
}
.collection-hero__image-container {
flex: 1 0 100%!important;
margin: 0!important;
}

my image size was 4446x4446 pixels but it still gets blurry .

my url is :

https://c7593d-2.myshopify.com/collections/vibe

2

Hi,

Can you share your storefront password?

3

Hi and thanks in advance for the reply ,

for this url

https://admin.shopify.com/store/c7593d-2/themes/152917279069/editor?previewPath=%2Fcollections%2Fvibe

pass is southdrops2023

4

Hi,

Do you mean the banner is blurry?

5

yes

6

We need to remove the optimized code from the banner to show the original image.

7

but how can i make the banner of the collection full width without getting blurred ? what are the dimensions ? or the right code to do it?

\