Make Logo longer

• 

  sefahey · Member · Sep 19, 2017 at 8:16 pm

  • Copy link
  • Add topic to favorites

  Another question! I am using the organization theme.

  I’d like the name of the school (the logo) to fit across the entire length of the website. I posted it via “customize” –> “theme”–>”logo.” Currently, I have something posted (which I made in Canva – combining the logo and the school name) that only covers about 1/3 of the width of the page. Is it possible to make this space longer so that I can post a longer logo?

  Thanks!

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

• 

  sstabrizi · Staff · Sep 19, 2017 at 8:37 pm

  • Copy link

  Hi @sefahey,

  There is a way you can accomplish what you are trying to do. However, it requires that you have either you must have either the Premium or Business plan active on your site to be able to make this change. What plan do you currently have? You can check here:

  https://wordpress.com/plans/my-plan/

  If you have the proper plan you can make this change by adding some custom CSS by navigating to Themes > Customize > CSS and adding the following under the default placeholder:

  #custom-header img {
  	max-width: 320px
  }

  The default width is 320px. You can modify the width by changing the 320px to your desired width (i.e. 640px).

• 

  sefahey · Member · Sep 19, 2017 at 8:54 pm

  • Copy link

  Thank you! I have premium and was able to input the width changes via CSS. Do you happen to know if there is a max width?

• 

  sstabrizi · Staff · Sep 19, 2017 at 9:42 pm

  • Copy link

  There isn’t really a max width per se, however, the width of the rest of the content listed below the logo is 920px. That means you can extend the width of the logo up to 920px without the logo appearing larger than the menu bar or featured image.

  For additional information on Custom CSS, including additional documentation, tutorials, and books, see the following link:

  https://en.support.wordpress.com/custom-css/

• 

  sstabrizi · Staff · Sep 20, 2017 at 8:42 pm

  • Copy link

  Hi,

  I just wanted to follow up on our discussion yesterday. The code I gave you only works on larger screens. There comes a point where the code I gave you won’t work on smaller screens. I also left out a semi-colon after the px size in the previous code.

  I see that you currently have the max-width set to 1000px. Here is what you would need to enter to make the logo responsive on mobile devices:

  #custom-header img {
  	max-width: 1000px;
  }
  
  @media screen and (max-width: 800px) {
  	#custom-header img {
  		max-width: 100%;
  	}
  }

  I hope that helps! :)