link to the home page is misplaced on my header logo

• 

  treasuresoflisboa · Member · Feb 28, 2017 at 10:37 am

  • Copy link
  • Add topic to favorites

  Hello!
  I have a logo on my header that is supposed to be linked to the home page of my site.
  I used the folowing CSS to reduce the size of my logo :
  a img {
  max-width: 50%;
  }

  (so it appears 50% of its original size. This is the only way I found to have a non-pixelised logo; otherwise, if I use a logo that I made myself and that is directly the right size, it is awfully pixelised.)

  But now, I have two issues :
  1. the link to the home page doesn’t appear at the right place anymore. only the bottom part of the logo is clickable and some white space next to the logo also is clickable.

  2. when I preview the mobile or tablet version of my site, the logo is aligned to the right, instead of being centered.

  Could you please help me ?
  thanks a lot!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Mar 1, 2017 at 2:45 am

  • Copy link

  Hi there, first off, go to Customize Site Identity and enter a title and tagline for your site as search engines frown on sites that do not have a title or tagline, and they can’t read the content of an image. After doing that, uncheck the box where it says, Display Site Title and Tagline and then save and your logo should then be fully clickable.

• 

  thesacredpath · Member · Mar 1, 2017 at 3:19 am

  • Copy link

  I’m seeing your logo left aligned on tablet and phone. First off, change your rule you used to resize the logo to the following.

  #header .site-logo {
  	max-width:50%;
  }

  As you have it, it could affect other linked images on your site.

  For the logo, to center it on tablets and mobile devices, add the following to the very bottom of your custom CSS.

  @media screen and (max-width: 767px) {
    #header .site-logo-link {
  	 text-align: center !important;
  	 float: none;
  	 margin-bottom: 30px;
    }
  	.logo-nav .title-holder {
  		text-align: center !important;
  		float: none;
  	}
  	#header #masthead {
  		display: none;
  	}
  }

• 

  treasuresoflisboa · Member · Mar 1, 2017 at 10:10 am

  • Copy link

  You little genius.
  Thanks again for your help, it seems to work perfectly ;) !

• 

  thesacredpath · Member · Mar 1, 2017 at 7:45 pm

  • Copy link

  You little genius.

  Now, things like that will go to my head. :)

  Thanks, and you are welcome.