How to expand logo to full-width

Hi Michiel,

I’m not sure I understand how exactly do you envision this.
You would need to have a really big file of your logo for it to look sharp, displaying full-width.
Do you mind adding the code you tried and sending us a screenshot of the result so that we can get a better idea? You can use an online tool for that (such as https://snipboard.io/) and paste the link into your reply.

hello Fresatomica,

Thanks for coming back on my question. In the meantime i found part of the solution on this forum. In the support-question ‘How to use CSS on Colinear to enlarge a logo?’of 4 years ago i found the following solution:

.site-logo-link {
max-width: 100%;
max-height: 100%;
}
.site-logo-link img {
width:200px;
max-height: 100%;

I have added these lines to my colinear-child theme style.css and only changed the width to 1300px. Now the logo is almost full width but unsharp. As you can see with the following link: https://snipboard.io/0UJpmZ.jpg
The logo is in the media library as you can see with: https://snipboard.io/WlxFLp.jpg

The URL of my site is https://www.st-mhm.nl

Kind greetings,

Michiel
}

Hello Michiel,

Many thanks for getting back to us.

I suspect this could be because of the Lazy Loading settings in Jetpack.

May I ask you to deactivate this as per: https://jetpack.com/support/lazy-images/.

Once deactivated, please also clear the site and browser cache.

This should hopefully clear up that fuzziness.

Many thanks.

hello Adam,

Thanks for your advice.

When I deactivated Lazy Loading in Jetpack and cleared the caches the logo was sharp in the WordPress environment on Chrome. It was not in other browsers like Firefox and Opera.
The sharp page looked like: https://snipboard.io/g1buhQ.jpg
The unsharp page in Firefox looked like: https://snipboard.io/IXyL6q.jpg

To make the surprise even bigger after some interaction in the WordPress environment in Chrome the logo returned to unsharp there too. Like: https://snipboard.io/6JFTIh.jpg

The good thing is that the jpg of the logo can be showed sharp! The bad thing is the probably Jetpack is fooling us. I even noticed that the logo option in WP is a Jetpack option as when I deactivated the Jetpack plugin the logo option disappeared in Site Identity WP customizer option.

I have captured the page-sources of both the sharp and unsharp Chrome pages. When I make a diff the only difference was a version no. which was different between the pages.

Kind greetings,

Michiel

Michiel,

It looks like there’s light at the end of the tunnel there.

Please be doubly sure that Lazy images is indeed switched off – as it looks like that is the problem.

If it is, please clear caches and cookies from all browsers.

The fact that there’s differences across browsers suggests that there is some caching happening there.

Many thanks.