Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
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!
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.