How to make space around site logo smaller – Sela theme

celesteallen · Member · Feb 27, 2018 at 9:40 pm
Copy link

Add topic to favorites
The logo at the top of my website (Sela theme) is huge, even after I resize it and make it smaller. It seems that the white space around the logo is what is making it appear to be so large. Is there a way to make the logo about one third the size of what it is now?

Thank you.

The blog I need help with is: (visible only to logged in users)
mommyhive · Member · Feb 28, 2018 at 1:04 am
Copy link
Hi there,

You can crop the image to desired size in your media library. Please read the below support document.
https://en.support.wordpress.com/images/editing-an-image/

Hope that helps and let me know if you have any questions.

Thank you.
baldfreud · Member · Feb 28, 2018 at 8:21 am
Copy link
Hi,

You can make the logo smaller by pasting this code into your CSS editor:
```
img {
    max-width: 50%;
    height: 150px;
}
```
You can play around with the % and px values and adjust them to the desired size.

If you don’t know how to add CSS or don’t know what Cascading Styles Sheets are you can refer to these two links:

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

Let us know if this works for you and whether you need more help.
baldfreud · Member · Feb 28, 2018 at 8:24 am
Copy link
Seems I have posted the wrong code, sorry about that.

The one I have shared would change all the images on your site.

Here is the right code for just the logo:
```
.site-logo {
    width: 50%;
    height: 300px;
}
```
celesteallen · Member · Feb 28, 2018 at 1:05 pm
Copy link
Thank you, both!

Cropping the image seemed to work a bit better than the CSS code. The quality came out better, however the theme itself (Sela) seems to have a lot of white space built into the header.

Not sure if you can adjust this using code, but if you know of a way, I would like to try it.
shubhamgmath · Member · Feb 28, 2018 at 1:51 pm
Copy link
Hi celesteallen

however, the theme itself (Sela) seems to have a lot of white space built into the header.

– To achieve this you need to add below CSS code in which we are forcing the header to make its padding to 0px.
```
.site-branding {
    padding: 0 !important;
}
```
Hope this helps, feel free to ask
celesteallen · Member · Feb 28, 2018 at 3:18 pm
Copy link
Hi shubhamgmath,

Thank you. That did make the space around the logo smaller, but it also made the size of the header image smaller. This in turn messed with the formatting of the welcome message at the top of the page as well.

I’ve left the code out for now since it changed more than just the space around the logo.
mommyhive · Member · Feb 28, 2018 at 11:38 pm
Copy link
Hi @celesteallan,

When you crop the image, crop it till the logo text in the center. Currently I see unnecessary white space in the top and bottom of your logo image. Once you crop it rightly and upload, it should resolve your issue.

If you still feel that Sela theme itself has lots of white space built into the header, then the code @shubhamgmath provided should do the needful. The code shouldn’t mess with the formatting of the page.
```
.site-branding {
    padding: 0;
}
```
Hope that helps.

Thank you.
kathrynwp · Staff · Mar 1, 2018 at 5:46 pm
Copy link
celesteallen – I see you got a lot of good help here, thanks to everyone for pitching in!

I wanted to give you a heads-up that since your site has a Business plan, you’re entitled to live-chat and email support, accessible here:

https://wordpress.com/help/contact

You’re welcome to still post in these forums, but those other support avenues may be faster, and you’ll always get a staff reply. Do feel free to take advantage of live chat and email support.

If you’d like to continue here, please me know if iamrishaan’s last suggestion helped. You can see how much whitespace there is in the logo file itself, so cropping it will help a lot:

I would also suggest you use either GIF or PNG format for your logo; it will give you a sharper result. JPG format is best used for images with many colours like photographs.
celesteallen · Member · Mar 2, 2018 at 2:28 pm
Copy link
Thank you mommyhive and kathrynwp! The logo/white space problem is fixed. Cropping it to the center and saving it as a PNG worked.

Kathrynwp – if other questions pop up I will use the live-chat and email support option.

Thanks again!
kathrynwp · Staff · Mar 2, 2018 at 2:42 pm
Copy link
Lovely, glad you’re set!

No items found.