Site logo size

Hi there, I was wondering why the site logo size is so small and how I can increase it as I am trying to add a more landscape proportioned logo which is displaying small and cropped to square. Thanks!

Hi there,

I hope you are having an awesome day and thanks for contacting us regarding your query.

This can be done with the help of some Custom CSS. Kindly provide me with a link to a page with this so that I may be able to write up some CSS that should work for your setup.

Looking forward to your reply :slight_smile:

Best Regards,
Support

Hi there,

Thanks so much for getting back to me. The link is below:
http://www.jdaveytest.co.uk/

Hope you can help!

Hey there,
Hope you’re doing well today

Kindly add and save the following code to Appearance > Customize > Additional CSS:

.top-header img {
height: auto!Important;
width: 100%!important;
}

After doing this, please ensure that the logo you have as your site’s logo isn’t the cropped version, just reset it and then clear your cache just to be sure.

I hope this helps :slight_smile:

Best Regards,
Support

Hi and thanks for your great job on this theme.
I would too increase my site logo size but when i use your CSS the logo’s resolution is so ugly.
Can you give me tricks to fix that please?

Hello there,

I hope you are doing well today.

You would have to use a larger image so that the resolution will not be affected by the logo size increase. So you can simply re-upload the image with a larger version.

Best Regards,
Support

I’m so sorry but the result is always so ugly…
The first picture is with small logo and no additional CSS
(this one : .top-header img {
height: auto!Important;
width: 100%!important;
})
The second is 1800x1800px and 300pp with additional CSS …
The result isn’t good (i try lot of other resolutions : 400x400, 800x800 150pp, 200pp…).
Sorry if i’m so bad…

When I use the CSS provided (below), it also makes the header image grow enormous and take up the whole screen. Anything to use just for the logo?

.top-header img {
height: auto!Important;
width: 100%!important;
}

Hi @kimberly,
Thanks for keeping in touch with us.

If the CSS makes the logo too big, then you’ll need to just decrease the width value in the CSS from 100% to the amount you’d like to have.

I hope this helps :slight_smile:

Best Regards,
Support

So no possibility to increase the logo’s quality? with css or acting on header.php?

Hi there,
Thanks for keeping in touch with us.

Image quality cannot be increased with code, sorry about that. You’ll need to ensure that the image is large enough. (If you’re extending the width longer than the actual image, it will become pixelated).

Sorry about that.

Best Regards,
Support

sorry if I wasn’t clear: the CSS seems to make BOTH the logo AND the header image grow. I would like the header image to stay at what it was and only the logo to become 100%.

Thank you

Hi!
I resolve my problem after lot of tries. I give you my trick if it can help someone.
I work on my logo on 200px x 75px with a good resolution it was the only way to have a decent resut for me and after i apply this CSS :
.top-header img {
height: auto!Important;
width: 200px!important;
}

Hello there,

I am glad that you found a good solution.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support