[Resolved] Add retina logo

[Fernando Díaz Gascón]

Hello,

My logo is not showed well in retina displays.

I followed this: https://generatepress.com/forums/topic/add-retina-display-resolution-to-the-logo/

I add the function indicated to upload svg files, in functions.php of my child theme, and I add a svg logo. I upload it through the customizer -> site identity and it let me upload it. But after uploading, nothing is showed in the web. I keep it uploaded today so you can see there is no logo. What could be happening?

In the forum topic you talked about this, you indicated another option:

Otherwise, you would have to create your logo twice the size of the actual size, and use CSS to resize it down to the actual size (squishing more pixels into the same area)

Could you please tell me the CSS I need to resize it down?

To see this issue, you can see my web in development with user and pass:

http://econactiva.es.mialias.net/
user: econac289
pass: q7lLHdjD

Thank you!

[Tom]

Hi there,

I’m seeing a PNG logo?

To reduce it to half size, you can do something like this:

.site-logo img {
    max-width: 402px; /* half of your original image size */
}

• This reply was modified 8 years, 1 month ago by Tom.

[Fernando Díaz Gascón]

You were watching the cache, sorry. I already deactivate the cache plugin. I still have problems with both solutions:

– The SVG is not working, when I upload it, it does not show anything. I dont know why.

– I upload a double size logo and I write your CSS code to reduce half size, but I find a lot of side effects (this is the case you can see if you see the web today):

1- The logo goes to the bottom of the header, not aligned with the navigation menu. You can see it in the web.

2- The logo of the sticky menu looks deformed.

3- In the mobile phone the logo looks smaller than before.

To see this issue, you can see my web in development with user and pass:

http://econactiva.es.mialias.net/
user: econac289
pass: q7lLHdjD

Thank you!

[Tom]

Ah, my code was wrong – looks like you need to be more specific: https://generatepress.com/forums/topic/add-retina-logo/#post-165800

Let me know if that helps at all 🙂

• This reply was modified 8 years, 1 month ago by Tom.

[Fernando Díaz Gascón]

It helps! But still an issue:

– in narrow screens, the logo is not adapted like before. If you narrow the screen, from 500px the logo remains the same size and in narrow screens it is cutted.

Thank you in advance!

[Tom]

Try this:

@media (max-width: 500px) {
    .site-logo img {
        max-width: 100%;
    }
}

[Fernando Díaz Gascón]

Now it looks great! Thank you.

[Tom]

You’re welcome 🙂

[Author]

Posts