Hi Guys!
Quick question that has been perplexing me for a LONG time…
I have been having issues with my logo appearing blurry in my header. My browser is not zoomed and it appears this way on every desktop I can find. On mobile it is crystal clear due to the separate logo assigned.
My url is www.yourrealagent.net
I would really love a solution for this because it kills the look of my site.
Thanks!
Blurry Logo In Header on Desktop?
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Rocco
Here is how we’re looking without the site, just the image on its own:
http://yourrealagent.net/wp/wp-content/uploads/2015/10/YRA_REMAX_logo_NoBG_Sep15-e1444197490566.png
Assuming you have the original file, let’s try this:
1. Add the following to Appearance > Custom CSS:
/* Logo */ #masthead .hgroup .logo img { max-width: 250px; }2. Go to Appearance > Theme Settings > Logo and re-upload your main logo except this time upload it at:
500 x 104px
So we’re doubling the logo size and using CSS to reduce it, thereby, hopefully, increasing the quality. Let me know how you come along.
Hey Andrew!
I added this;
/* Logo */
#masthead .hgroup .logo img {
max-width: 250px;
max-height: 52px;
}
without the height constraint it changed the image proportions. Looks good now, do you foresee any issues with this solution?
You’re the man, much appreciated!
Looks like you went for a 1000px wide logo. That’s fine.
It’s looking good my side. I don’t see any problems with this solution. Let me know if anything comes up.
Hey Andrew,
Just FYI it wasn’t working on mobile….
I went with 500px per your advise and added this code and it appears to now be good to go!
/* Logo */
#masthead .hgroup .logo img {
max-width: 250px;
height: auto;
}
Ahh there we go. That’s solid. Nicely done.