Logo Retina

Comments

• Air

  September 2015 edited September 2015 Posts: 10,970

  Hello there:-)
  
  IF you have other logo image in higher dpi then you can use such custom CSS:

  
  @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
  only screen and (-o-min-device-pixel-ratio: 13/10),
  only screen and (min-resolution: 120dpi) {
  	a#logo{
  		background: transparent 50% 50% no-repeat;
  		background-size: contain;
  		background-origin: content-box;
  		background-image: url(http://murielpr.flywheelsites.com/wp-content/uploads/2015/09/MPR-Retina.png); /* EDIT HERE  */
  	}
  	a#logo img{
  		opacity: 0;/* we have image so its display when no styles are applied */
  		width: 100%;
  		height: auto;
  		display: block;
  	}
  }
  
  @media only screen and (min-width: 1000px) and (-o-min-device-pixel-ratio: 5/4),
  only screen and (min-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and (min-width: 1000px) and (min-resolution: 120dpi) {
  	a#logo img{
  		width: 252px; /* here I inserted dimensions of your current logo */
  		height: 38px;
  	}
  }
  

  If this still wont give good results, then please post live link and I will try to adjust it.
  
  With kind regards.

  Post edited by Air on September 2015
• mprotw

  September 2015 edited September 2015 Posts: 13

  Hello,
  
  As I strictly follow your instructions, it still won't give results.
  
  Here is the live link to investigate : http://murielpr.flywheelsites.com
  
  Thanks for your kind help.

  Post edited by mprotw on September 2015
• mprotw

  September 2015 edited September 2015 Posts: 13

  Here is the implemented CSS code containing the high dpi retina logo url.
  FYI the high dpi logo image is 1024x155 px @144 dpi

  Post edited by mprotw on September 2015
• Air

  September 2015 Posts: 10,970

  Sorry my mistake, I made styles with class selector instead of ID selector. I have edited and fixed above code, by changing a.logo to a#logo.
  
  You can copy it again.
  
  With kind regards.
• mprotw

  September 2015 Posts: 13

  Hello,
  
  Thank you for your help and fast response.
  I copied the exact fixed code, and the logo appears very tiny.
  I do not understand why?
  
  Regards.

  

  

  screenshot.png

  2120 x 468 - 151K
• Air

  September 2015 Posts: 10,970

  I have checked on iPad and Iphone and it looks OK. Where do you see it tiny?
  
  With kind regards.
• mprotw

  September 2015 Posts: 13

  On browser desktop (every browsers). I cleared all caches, and reset all browsers. Still the same.
  
  Here is the screenshot. You can see with the live link http://murielpr.flywheelsites.com
  
  Regards
• Air

  September 2015 Posts: 10,970

  I believe I can't see it live, as it appears you have retina screen in your computer, and that why you see this. Style I gave was specially prepared for small retina screens, it didn't take in account big retina screens :-)
  
  Still I don't have such big retina device to be able to see it, and on simulators it works good :-S
  
  Best solution I could think of now would be to write style with specific dimensions of your logo for big retina screens.
  
  I have edited my previous answer again. Give it a try, and tell me how it went.
  
  With kind regards.
• mprotw

  September 2015 Posts: 13

  Hello,
  
  Thank you for the help, the display size is working well, relatively to the current logo.
  
  In fact, I have a iMac 5K. However, the logo still doesn't displaying sharp as it have to do, I can see that is the same result like the current logo as it appears crispy ; even on iPad and smartphone. That's strange isn't it?
  
  So, if it is the best you can do at this end, thanks again for your help.
  
  Kind Regards.
• Air

  September 2015 edited September 2015 Posts: 10,970

  Yes, now I see it is again bad on iPad, but it was sharp after last change. Let me check your CSS...
  Ok, I made few mistakes, now I have tested this code and it works for me. Please use what is below:

  
  @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
  only screen and (-o-min-device-pixel-ratio: 13/10),
  only screen and (min-resolution: 120dpi) {
  	a#logo{
  		background: transparent 50% 50% no-repeat;
  		background-size: contain;
  		background-origin: content-box;
  		background-image: url(http://murielpr.flywheelsites.com/wp-content/uploads/2015/09/MPR-Retina.png); /* EDIT HERE  */
  	}
  	a#logo img{
  		opacity: 0;/* we have image so its display when no styles are applied */
  		width: 100%;
  		height: auto;
  		display: block;
  	}
  }
  
  @media only screen and (min-width: 1000px) and (-o-min-device-pixel-ratio: 5/4),
  only screen and (min-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and (min-width: 1000px) and (min-resolution: 120dpi) {
  	a#logo img{
  		width: 252px; /* here I inserted dimensions of your current logo */
  		height: 38px;
  	}
  }
  

  Hope this time!
  
  With kind regards.

  Post edited by Air on September 2015
• mprotw

  September 2015 edited September 2015 Posts: 13

  Perfect retina display on every devices. It works like a charm!
  Thank a lot for your kind help for this implementation.
  
  One last thing, the logo is "touching" the border browser window's on the left.
  It is possible to have the code for aligning it just a little bit on the right? i.e align like "Follow".
  
  Thanks and best regards.

  Post edited by mprotw on September 2015
• Air

  September 2015 edited September 2015 Posts: 10,970

  Hello
  
  I forgot to add one rule background-origin: content-box;. I have updated code now, and it will fix this issue.
  
  With kind regards.

  Post edited by Air on September 2015
• mprotw

  October 2015 Posts: 13

  Absolutely Perfect Rendering!!! Thank you very much for all of this.
  Have a great day!
  Best regards.