Tagged: blurry logo
-
AuthorPosts
-
October 7, 2015 at 4:28 am #514888
Hi,
My logo looks blurry on Retina on all browsers (Safari, Firefox, Chrome all latest versions). I’ve uploaded a bigger size (to accommodate for that) but inserted it at a smaller size.
The funny thing is, it is only the normal logo which looks blurry. The reversed one on the home page looks fine.I’ve also tried to upload at the actual logo size dimensions but that did not make any difference on the blurring.
https://www.dropbox.com/s/jyk4b9rsd0vu9r8/2015-10-07_13-16-56.jpeg?dl=0
October 7, 2015 at 1:53 pm #515210Hey Corina!
use a plugin like this one: https://wordpress.org/plugins/wp-retina-2x/
Best regards,
AndyOctober 12, 2015 at 9:59 am #517219Hi Andy
Thanks for the info. I installed retina-2x and uploaded a bigger logo and inserted it… it looks kind of okay on Safari (it’s sharp and everything, but it’s bigger than it was), on Firefox and Internet Explorer 11 it just inserted it in a massive size (original uploaded size).
I am quite confused about how I can get to logo to be the size I want it to be in all browsers and to still be sharp on all devices. The size listed as a recommendation in the theme settings is just too small.
Appreciate your help, thanks so much.
CorinaOctober 12, 2015 at 3:10 pm #517396Hey!
You can try using following code to change logo URL on Macs
function add_custom_logo(){ ?> <script> jQuery(window).load(function(){ jQuery('.avia-mac .logo img').attr('src','http://kriesi.at/wp-content/themes/kriesi/images/logo.png'); }); </script> <?php } add_action('wp_footer', 'add_custom_logo');
Regards,
YigitOctober 13, 2015 at 7:48 am #517864Hi Yigit
Thanks for getting back to me. I am not quite following. On the mac is where the logo looks best (although slightly bigger than I’d like it to be)… it is Firefox and IE where it spills over the site and you can’t even see the whole logo.
Isn’t this more of a css issue? And is there a way of having it a custom size? I understand for Retina 2x to work I have to upload a large size of the logo file.
Thanks so much and sorry for not explaining properly.
All the best,
Corina
xxOctober 13, 2015 at 1:49 pm #518080Hey!
The width of the logo is 2961px. That is a bit too big for the actual logo container. Please tryto resize it to less than half of the current size. Add this in the Quick CSS field to constrain the width of the logo:
.logo img, .logo, .logo a { margin-top: 25px!important; max-width: 605px; }
Cheers!
IsmaelOctober 14, 2015 at 4:25 am #518479That worked. Awesome, thanks so much Ismael.
All the best,
Corina -
AuthorPosts
- The topic ‘Logo Blurry on Retina (all browsers)’ is closed to new replies.