BlueOwlCreative » Topic: Logo Retina version

Logo Retina version

hhuchon — Mon, 08 Jul 2019 17:14:51 +0000

Hi there,
I come back to you for a previous topic : the retina version of the logo.
My non-retina logo is 362x36px, so my retina version logo is doubled as recommended to 724x72px. The problem I have is that on retina screens the logo is really double in size. I”ve already used this function on another site and it works perfectly: the initial logo is 250x54px and the retina version 500x108px, and the logo doesn’t get bigger on retina screen, it is just the same size but looking better in definition.
So, do you have an idea why this is happening ? If you confirm that my message will stay private I can send you the credentials.
Thanks for your help

Reply To: Logo Retina version

BlueOwl — Tue, 09 Jul 2019 07:47:34 +0000

Hi there,

Sure, send them over, mark your message as private by clicking the option below “Set as private reply”.

Reply To: Logo Retina version

hhuchon — Mon, 15 Jul 2019 13:58:10 +0000

This reply has been marked as private.

Reply To: Logo Retina version

hhuchon — Mon, 15 Jul 2019 17:29:15 +0000

This reply has been marked as private.

Reply To: Logo Retina version

BlueOwl — Tue, 16 Jul 2019 07:32:06 +0000

Hi again,

I believe it has to do with the huge size of the logo (700+px).
Like we previously discussed you could fix this with a single line of CSS, the one I gave you previously was this:

#logo img {
    max-width: 362px;
}

now I see we have to modify this a bit as it breaks when viewing the site in mobile-retina, so this should be the final version, I replaced the previous with it in Theme Options:

@media only screen and (min-width: 769px){
#logo img {
    max-width: 362px;
}
}

Let me know if that does it!

Reply To: Logo Retina version

BlueOwl — Tue, 16 Jul 2019 08:10:38 +0000

As for the buttons in Columns – easy.
Just add this CSS class to the columns – “center”.