Custom logo blurry on mobile

  • Resolved meganmarsh94

    (@meganmarsh94)


    5 years, 6 months ago

    I’m having an issue with my logo showing blurry on my phone, but looking fine on my computer. I’ve uploaded several different PNG files exported in different ways- this most recent is exported for web as a PNG-24. I’m assuming the issue has to do with the resolution of my phone screen being higher quality than my computer, but not sure how to resolve.

    I read an article about creating a larger logo (300×600 px) and then resizing the image with code so that it displays as 150×300 px. Would this work? If so, what code would I have to use to change the size of my logo image. Any help is appreciated- thanks!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author lyrathemes

    (@lyrathemes)

    @meganmarsh94 Thanks for trying out Kale, we appreciate it.

    You can try something like this in Appearance > Customize > Additional CSS

    .logo {
    width: 300px;
    height: auto;
    margin: 0 auto;
}

    Hope that helps.

    Thread Starter meganmarsh94

    (@meganmarsh94)

    Is there a way to control the size of the logo just on mobile? This worked for the website and tablet version, but mobile isn’t sizing correctly or centering correctly.

    Hi @meganmarsh94 To change the size of logo on mobile only you need to replace previous version with this one:

    @media (max-width: 768px) {
    .logo {
        width: 150px;
    }
}

    Kind regards

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom logo blurry on mobile’ is closed to new replies.