Change logo size – Office 365 Sharepoint 2013 public site

Your logo represents your brand and is arguably the most important single element on your site. Most competent web site platforms recognize that and provide tools to ensure your logo looks as good as it can. Because Office 365 isn’t really designed with public sites in mind, it only gives you one sizing option. If your logo doesn’t fit, there’s no editing tool to change that. To resize your logo – or any image – normally you could just add some custom css to the image. The containing element should then expand to accommodate the image. Due to poor coding practices in 365 though, only the width can be changed this way. MSFT has restricted the height of the containing element which may throw off your logo’s proportions.To override that , use the”min-height” attribute in your css (add this to your custom stylesheet – changing the dimensions to suit), #DeltaSiteLogo{width:200px;min-height:150px !important}
OR try:
.ms-siteicon-img{min-height:150px} /*the logo image*/
div#siteIcon{height:150px !important}/*the containing element*/
The latter will also make the header area larger and resposition the tilte and nav, which may not be desirable. If so, try this:
.ms-siteicon-img{min-height:150px;z-index:100;position:relative;top:-50px !important}
That will enlarge the logo AND keep it layered above the header without repositioning the title/nav elements.

If the width is an issue try “min-width” too. This works in all browsers that support the min- attribute (so won’t work in IE6 and IE7)


Visit my forum » if you have any questions. For development work, you can contact me here ». And if you think this would be useful to others, feel free to share it by clicking one of the share buttons up top!