Changing size of site logo (image at top)

[kristincali]

My site logo (the image at the very top) is displaying larger than the actual image even is. Is there a way to change that size? Preferably by percentage?

[kristincali]

website is kristinbytheocean.com

 

[Andy]

Your logo image is 500×195 so it will never display larger than those dimensions.

I can see on your site you have already added some custom CSS to give the logo a maximum display width of 283px.

Yes you can use a percentage instead, example:

.custom-logo {
    max-width: 50%;
}

One thing to note is that using percentage will give the image a maximum width of the available area in which it sits.
So for example, the width of the inner container of the header is say 980px, then using max-width: 50% would display the logo at 490px width. This is 50% of the 980px container, not 50% of the 500px wide image.

So it may make more sense in some instances to use a pixel value instead, example:

.custom-logo {
    max-width: 283px;
}

[kristincali]

Very helpful. THANK YOU.

[Author]

Posts