Mobile logo still blurry

Hello, I uploaded logo (many ways of export) but it is still blurry on mobile.

How can I fix this, please? www.tvojstyl.fashion

I found this solution, but it doesnt work for us

 @media only screen and (max-width: 760px) {
      .site-branding img.custom-logo {
        max-height: 100px;
      }
    }

Any ideas please?
Thank you

Hello,

I uploaded logo (many ways of export) but it is still blurry on mobile.

I’ve just checked your website on my Android phone in the latest Chrome browser version and it looks good. Have you already resolved this issue?

Kind Regards, Roman.
aThemes Support

Hello,

I have not. It still ist little blurry, not as sharp as on desktop. It looks little worse on iphone.

Any ideas? Maybe how should I export my logo? png jpg? how many dpi and so on? I tried both jpg and png 200x80 and 400x160 72 dpi and 300dpi still the same tho

When I set logo on 100px; it is sharp, but too small

@media (max-width: 768px) {
    .site-branding img.custom-logo {
        width: 100px;
    }
}

So this leads me to question, can I upload 400x160 px logo and have it shrunk down to 200x80 via css? Seems like this would solve my problem,

Thank you

Hello, you can try to remove the srcset attribute with jQuery.

  1. Install and activate Insert Headers and Footers plugin that will allow you to insert JavaScript (jQuery) code.

  2. Go to Settings → Insert Headers and Footers section, add the following code to Scripts in Header field, and click Save button.

<script>
    jQuery(document).ready(function(){
        jQuery('.sow-image-container img').removeAttr('srcset');
    });
</script>

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

thank you, but before I try this, is there any way I would change settings/rules with uploading logo, that would let me upload logo 400x160 px? And I would scale it down with css.

Thank you

Hello, you actually have 1320×482px image there.

And it’s scaling down with srcset attribute, you can read about it here:
https://www.w3schools.com/tags/att_source_srcset.asp

Kind Regards, Roman.
aThemes Support

Sorry, this doesnt work.

When I scale it down with css to 100px, it works tho. So I need theme to allow me to upload logo 400x160px without cropping.

Is there way to change this?

Thank you

Hello,

When I scale it down with css to 100px, it works tho.

I’m not sure what exactly you are scaling, unfortunately.

Can you please provide some explanatory screenshots?

Kind Regards, Roman.
aThemes Support

When I upload my logo, recommended size is 200x80 px. I tired this size with 72 dpi, 300 dpi, 600 dpi. All the same. When I try to upload logo bigger than 200x80 px, theme will “force me” to crop logo. I have option “skip” but it has no effect (at least I dont see any difference when I skip and when I dont)

So whatever logo I upload is blurry. When I use this css

@media (max-width: 768px) {
    .site-branding img.custom-logo {
				max-width: 100px;
    }
}

Logo seems to be nice and clean, crisp.

So I was asking if there was way to change code (or whatever) in theme that would let me upload logo 400x160 - recommended would be 400x160, so I can use css:

@media (max-width: 768px) {
    .site-branding img.custom-logo {
			max-width: 200px;
    }
}

and it would (hopefully) have the same effect as in my case with 200x80 logo scaled down with css to max-width: 100px;

Thank you

Hello,

I was asking for some screenshots because here is what I see on your website:

I suppose that it is not your main home page.

Kind Regards, Roman.
aThemes Support

Sorry sure, here are logos
max-width: 130px;
and
max-width: 200px;

Hello,

Thank you for the screenshots. Please check this topic:

Kind Regards, Roman.
aThemes Support

I think this will work thank you

1 Like

Okay, you are welcome!

Please feel free to ask any other questions that you might have in future.

Kind Regards, Roman.
aThemes Support