This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Blurry Logo In Header on Desktop?

Resolved 5 replies premiumthemetheme-vantage
Rocco Curci
10 years ago · Last reply by Andrew Misplon 10 years ago

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!

URL: http://www.yourrealagent.net

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

5
  1. Andrew Misplon Staff 10 years, 4 months ago

    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.

  2. Rocco Curci 10 years, 4 months ago

    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!

  3. Andrew Misplon Staff 10 years, 4 months ago

    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.

  4. Rocco Curci 10 years, 4 months ago

    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;
    }

  5. Andrew Misplon Staff 10 years, 4 months ago

    Ahh there we go. That’s solid. Nicely done.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread