Blurry Logo (desktop)

Hi,

I am struggling to make my Logo look sharp on desktop version (1722x587 pixels image). On Mobile it looks good.
Any recommended fix for this?

daferconsulting.com

Thanks.
David

Hello there,

It looks fine to me. I am using Chrome on MacBook Pro. Do you notice this issue appears on other browsers as well? Please also test it with other devices.

Regards,
Kharis

Hi !,

I just tried it also on my laptop using internet explorer and it looks much worse than using google chrome (also laptop HP Pavilion) :frowning: .

Thanks for your support, any hint?

Cheers,
David

Hello,

I would like to try changing the size of the box where the Logo fits in and see if I can improve the resolution. Do you have a code for this? something generic so I can change the pixels size of such field / box?

Thank you.

Best regards,
David.

Hello David,

AFAIK, Sydney doesn’t reduce the image size and quality after upload process. You can see the final image file by viewing the source code with inspector tool of the web browser. Maybe there’s an image optimization plugin or something in your site? Please check the plugin list in the plugin administration panel.

To change the box size, add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .site-logo {
      max-width: 150px;  
    } 

Regards,
Kharis

Hi Kharis,

After checking the Plug In panel, I don’t believe I have any plug related to image optimization. Thanks for the Code, looks like its not possible to make it bigger than ~300 Pixels?

Thanks.

BR,
David

Dear Kharis,

I would appreciate a response, thank you.

BR,
David

Hello David,

It’s possible to upload any size of image as the theme doesn’t resize it during upload process. However CSS code limits it size. To enlarge it to 300px wide, you’ll need to add this extra CSS code:

    .site-logo {
      max-width: 300px;  
    } 

Regards,
Kharis

Hi Kharis,

I meant to ask If it is possible to make it wider than 300 pixels.
Please let me know if there is any way to do it.
Thanks.

BR,
David.

Hello David,

It’s possible. Firstly, re-upload your logo and ensure its original size (before upload) is wider than 300px as you want. Then let me know if you’ve done so.

Regards,
Kharis

Hi Khari,

Checked the media library and the Logo dimensions are 1722 × 587, I also re-uploaded it.

Using the code:

.site-logo {
max-width: 300px;
}

It doesn’t make any change if I put 300, 350 or 400px.

Thanks.

BR,
David

Hello David,

Please try adding this extra CSS code:

    img.site-logo {
      width: 350px;
      height: auto;
      max-height: 200px;
    }

    @media only screen and (min-width: 992px) {
      .site-header .col-md-4,
      .site-header .col-md-8 {
        width: 50%;
      }
    } 

Regards,
Kharis

Thanks Khari, It works perfectly.

Have a nice day.

Best regards,
David

You’re welcome David!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis