Using retina logo with pixel ratio > 1

1 reply · opened Jan 27, 2020

PphiwoJan 27, 2020

Hello there!

By default retina logo is used with pixel ratio >= 2.
So when I open website on PC with scaling e.g. 125% the logo is blurry.
So my question is where do I have to change code when I want to have retina logo when scaling of PC is > 100%.

Thanks a lot for your help!

SSemicolon WebSTAFFJan 28, 2020

Hello,

Please find the following code in the css/responsive.css File:


@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 991.98px),
only screen and (   min--moz-device-pixel-ratio: 2) and (max-width: 991.98px),
only screen and (     -o-min-device-pixel-ratio: 2/1) and (max-width: 991.98px),
only screen and (        min-device-pixel-ratio: 2) and (max-width: 991.98px),
only screen and (                min-resolution: 192dpi) and (max-width: 991.98px),
only screen and (                min-resolution: 2dppx) and (max-width: 991.98px) {
	#logo a.standard-logo { display: none; }
	#logo a.retina-logo { display: inline-block; }
}

You can simply change the Values according to your needs to display the Retina Image in your Desired Resolution.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard