How to prevent distortion and blur in Ella theme banner images?

[Jushy]

Hello

I have a problem with the featured image on my collections page. The featured image that we uploaded to the collection is usually at the top of the page below the header.

What my problem is the image becomes blurry in desktop view as well as blurry AND distorted in mobile view

The image above is the desktop view. Its somewhat blurry but not to the extent of being noticeable

This image is the mobile version. See how its blurry enough to be noticeable and also it only captures a percentage of the original image. 

SOLUTION
The image dimensions that I want to use is 700px by 100 px. This is because I want the featured image to be wide and thin.

What I need help with is to make it so the header collection(name of the section) doesn't distort the image and blur it. 


Useful Information
https://www.pawfurnish.com/collections/blanket
Password:nartog

Here's the original image that I uploaded to the collection image

[PageFly-Victor · Accepted solution]

Hi @Jushy

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

-Go to Online Store->Theme->Edit code

-Asset-> ->base.css  paste the below code at the bottom of the file.

@media (max-width:767px){

#HeaderCollectionSection-template--14877616766999__banner{

    padding-bottom:0px !important

}   

    .image.image-mobile.image-adapt.from-desktop{

        padding:0 !important

}

.image.image-mobile.image-adapt.from-desktop img{

    position: static !important;

    min-height: 50px !important

}

}

Best Regards;

Pagefly

[andyWGC]

Hi I have the same issue however it is distorting the image on desktop, which is showing correctly on mobile. 

Would I do the following

@media (max-width:767px){

#swapfor my assest{

    padding-bottom:0px !important

}   

    .image.image-desktop.image-adapt.from-mobile{

        padding:0 !important

}

.image.image-mobile.image-adapt.from-desktop img{

    position: static !important;

    min-height: 50px !important

}

}