So you have just added your brand's logo to find out it's looking a off on your Debut theme: maybe it is a bit too small, maybe a bit too big, or maybe it's just plain huge and making your website's header look off.

Don't worry – that is a common issue to deal with when using the Debut theme. Fortunately it takes very little effort to get it fixed as well.

Here is how you can quickly get that solved!

Adding the code to your theme

1. From your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
2. Find the file named theme.css or theme.scss file. They are the same file, but on older Debut versions it used to be named as “theme.scss”.
   
   
   
3. Now paste the following code at the very bottom of the file.
   
   
4. You can customize the values as per your wish:
   
   80px = the width of the logo on desktop
   0px = left padding for the logo on desktop
   
   100px = the width of the logo on mobile
   0px = left padding for the logo on mobile
   
5. Now click on “Save” on the top right and you're all set!

In case your header is still way too large or there is too much white space…

It's important to ensure that your image has no white space around it, otherwise it will add unwanted, extra padding to your header. This type of padding that comes from the image is not possible to be addressed via code.

To check whether your image has white space around it, open it in a new tab using the browser of your preference.

Here is an example of a logo our client was using with way too much white space around it:

When adding this to the header's logo, it would look way off since the image itself has a lot of white space.

Therefore, we had to trim it and re-upload to the website. Here is how the final version was looking like, with no excessive white spaces surrounding it:

And that is it!

Continue reading

Here are some other tutorials you may be interested in:
– Add arrows & swiping to Debut product pages
– Debut “click to zoom” lightbox tutorial: mobile friendly images, slider & arrows
– Improve your website's safety: block right click, image copying and more