Header Logo Fuzzy

Homepage › Community Forums › Epik Theme Support › Header Logo Fuzzy

Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • November 20, 2015 at 10:23 pm #16730
    caroline
    Customer

      My header logo is blurry. I’ve changed it over and over and no improvements. My footer logo is fine. I am using the correct dimensions for the header. My graphic designer suggested I make the logo twice as big and then scale it down by half using html to correct the problem. Can I do this in css? If so what do I need to do?

      http://bit.ly/1T48sMc

      Thanks much,

      Caroline

      November 20, 2015 at 10:31 pm #16731
      Andykev
      Customer

        They look the same to me…using a laptop to view.

        November 20, 2015 at 10:39 pm #16732
        Andykev
        Customer

          If I blow my screen up to bigger than 140% the header logo is a bit fuzzy. The footer logo doesn’t do this. They are not pulling the same media file from your library?

          November 21, 2015 at 1:36 am #16733
          caroline
          Customer

            No the footer logo is larger on purpose. The header logo is smaller to accommodate the specs given for the header 360 x 161. I’ve checked the logo in Photoshop and its fine before I drop it into the header. Once in the header its fuzzy. Fuzzy on mobile too.

            November 21, 2015 at 1:34 pm #16738
            Andykev
            Customer

              https://managewp.com/responsive-images

              This site has some good info dealing with your fuzzy logo issue. There are a lot of things to look at, basically how you size the image, and if you are allowing WordPress to “resize” it.

              The Epik theme, and .css are not causing the problem, and a bit more exploring is needed to check all the settings, etc.

              On my sites, I size the logo and use Adobe to format it for the web as a .png, and when uploading I say NO to cropping. The functionts.php settings match the uploaded image exactly.

              November 21, 2015 at 8:17 pm #16751
              caroline
              Customer

                Thank you Andy. I sized the logo exactly in Adobe PS, saved as a png and said “No” to cropping, many times over before posting this thread so that’s not it. (Head scratch here). 馃檪 Thanks for this article. It confirms I’m not imagining this.

                November 21, 2015 at 9:55 pm #16752
                caroline
                Customer

                  I’ve tried a number of things this eve to no avail:

                  I have always used a logo image 360 x 164 as specified in the EPIK theme. This has always come out fuzzy in the header with no cropping.

                  Tonight I changed the media settings as suggested in the Manage WP Blog. This did not address the issue.

                  Further in the article Grace’s comments mirror what my logo designer told me: Double the pixel size, upload and set precise width in pixels to half the size in the css or html so that the logo will display twice as many pixels in half the size.

                  I did this and when setting the css file to half the size the logo is cut in half. Also the option to “not crop” is gone when uploading a file 2x the size: 720 x 328.

                  Then I found this on another forum and tried it. This did not work either.

                  .site-header .site-logo-anchor {
                  position: absolute;
                  top: 60px;
                  left: 50%;
                  margin-right: -50%;
                  transform: translate(-50%, -50%)
                  }

                  Any other suggestions? Do I need to somehow override EPIK’s forced cropping of any image over 360×164 in order to maintain the larger image and then reduce by 50%?

                  November 21, 2015 at 9:57 pm #16753
                  Andykev
                  Customer
                    This reply has been marked as private.
                    November 21, 2015 at 10:28 pm #16754
                    caroline
                    Customer

                      Can you send me a email address to send these files to? When I sent via reply the email bounce back.

                      November 21, 2015 at 11:16 pm #16755
                      Andykev
                      Customer
                        This reply has been marked as private.
                        November 22, 2015 at 2:29 am #16756
                        Andykev
                        Customer

                          Caroline,

                          Per my email, you can size your logo smaller to 75% or even 50%, or any other percentage which gives you the look you want.

                          Adding your “footer” image to the header was great, as the graphic part filled the container of 360px X 164px.

                          Now the section you want to change from “100%” to the new size is on line 2055 of your .css

                          /* Logo, hide text */

.header-image .site-header .wrap {
	padding: 0;
}

.header-image .site-title a {
	float: left;
	min-height: 164px;
	width: 75%;
}

                          Now! This will look bad, the “L” at the end will be cut off..so to fix this..

                          ADD THIS to the very bottom of your style.css:

                          .header-image .site-title a {
    background-size: contain !important;

                          Now, the newly loaded image you took from the footer and placed in the header area is responsive, and you can size it to your liking (within the container limitations, of course).

                          I think it looks much sharper and fixes your concern. And I learned a lot on this playing with image formatting. Thats how I get better…working on these puzzles.

                          December 12, 2015 at 10:03 am #16838
                          caroline
                          Customer

                            Thanks Andy! You were a tremendous help!

                          • Author
                            Posts
                          Viewing 12 posts - 1 through 12 (of 12 total)
                          • The topic ‘Header Logo Fuzzy’ is closed to new replies.