Logo on mobile sharp only when it's too big on desktop view

[yeskola]

Hi guys,

I've done a lot of research on this and tried out different things by using different image sizes and formats, adding code to the SEO header and uploading images in assets and changing the code but nothing seems to work.

My problem is that when I upload a logo in the header, it looks good in desktop view but blurry in mobile view. This is true when I:

i) upload a logo with 150px width --> looks good on desktop without resizing, blurry on mobile

ii) upload a logo with 500-1000px width --> looks good on desktop when RESIZED in editor, blurry on mobile

iii) upload a logo with 500-1000px width --> looks good on mobile without resizing it in editor. However, now the logo is comically big on the desktop view.

I tried to modify some pieces of codes that change the logo size when the screen is mobile size but didn't have any luck on this. Images below should show what I mean with the logo being too big.

Any help would be appreciated

[PaulMathews]

@yeskola Add the following highlighted items to your (desktop and mobile) logo classes css:

.wsite-logo a img {
.
.
.
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

[yeskola]

Hi @PaulMathews 

thanks for your prompt reply. I added the piece of code in the places with logo and img. Below the screenshots. Maybe I did it wrong being a N00b but this didn't have any impact on the logo. I also tried a similar solution on SEO settings > Header but didn't work either. As the size of the logo in the mobile view is not a problem even when the size is up to 800px in width, I think the best solution would be somehow to limit the size of the logo in the desktop view. Guess i'll keep looking.

Thanks again