[Resolved] Sharper logo on mobile

[Karim]

Hello Tom,

I saw this post in which you gave 2 options for a better quality logo on mobile screens: https://generatepress.com/forums/topic/add-retina-display-resolution-to-the-logo/

One you suggest an svg logo, the other upload bigger logo and use css to make it smaller. The second option works for me, and the logo is very sharp on mobile.

However, i uploaded a logo of 616px width, and used css to make it’s max-width 370px. which is 60% of original size.On bigger screens that’s perfect view, but on smaller screens ( i use iphone 6) you see the logo exceed the width of the screen, and you see last part of logo outside the screen.

Is there some css that forces the logo to stay within the screen limits?
It’s for this site: http://rvgietvloeren.primemedia.nl/

Thanks in advance captain:)

Karim

[Tom]

Try using width instead of max-width.

.site-header .header-image {
    width: 308px;
}

This way GP already tells it to be max-width: 100% so it’s responsive, but you’ll still get the benefits of it being 50% smaller.

[Karim]

Works perfectly. You are boss again!! Thank you so much:)

So glad i came across GeneratePress and you sir

Greets,

Karim

[Tom]

You’re very welcome! 🙂

[Author]

Posts