Support » Theme: Kale » Custom logo blurry on mobile

  • Resolved meganmarsh94

    (@meganmarsh94)


    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.

    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)
  • You must be logged in to reply to this topic.