After much work, your website's logo is finally done and it looks great. You're excited to upload it to your website, and when you finally do so, you notice a problem: it is either way too small or with lots of space surrounding it.

It's natural to assume it could be something easily fixed with a piece of code (and sometimes it could indeed be the case), but more often than not the issue is not related to code at all, it's related to the image itself.

Understanding the problem

Take a look at the following example:

Although the logo per se looks ok, it is looking really small when loaded to the website. And, when we increase the logo's width, you can notice the header's height gets obnoxiously large:

So, what is the problem there? It's actually quite simple: the white space surrounding the image is adding extra padding to the website. This can not (well, rather should not) be fixed with code. You must trim the white space around it.

In this particular example the logo's background is white, but it could be of any color or even transparent, it would still be adding unnecessary space.

How to actually fix the problem

To fix it you just have to trim all the empty space surrounding your logo with an image editing software. For the sake of simplicity, in this tutorial I'll be using the I Love Image's online image cropper. It is free and very simple to use. Just upload your logo to the website, trim the white space around it and download the new image. Here is how our logo looks now without any white space around it:

And here is how it looks in our header:

Conclusion

This is how you can fix your logo's spacing without touching any code. You may also be interested in some other tutorials:

– How to make slideshow images stop cutting off
– How to add a collection with tabs section to any theme (copy/paste, no apps, blazing fast)