Header image blurry on mobile

  • moonchez

    (@moonchez)


    8 years ago

    Warning: I’m kind of new at this… so please be patient <3

    I bought a custom theme (Tulip). When I upload a high resolution picture (8229X4246) for my header logo, its appears HUGE on desktop, but resizes perfectly on mobile. When I reduce its size down to be the correct size on desktop (roughly 300X117), it causes it to be blurry on mobile.

    http://huskiesinthehatch.com

    I’m assuming the image is being stretched on mobile because the theme has the header image coded to be the full width of the screen (which for most mobiles is roughly 600?).

    Is there a way that I don’t have to pick between a huge desktop image or a blurry mobile image?

    Thanks so much,
    Sonia

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years ago

    What do you mean by appears blurry? I can’t see the issue

    Thread Starter moonchez

    (@moonchez)

    8 years ago

    The logo is blurry on mobile.

    I’ll upload the image at full resolution to show you the difference (and if you check the desktop site it will now be HUGE)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years ago

    I’m sorry I cannot replicate the issue.

    Thread Starter moonchez

    (@moonchez)

    8 years ago

    There’s no way to code it so that the image appears in different sizes in different devices?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years ago

    There isn’t a way for us to check that because all we can see is the image at the website end, like you can. Your theme’s vendors/ authors can check that because they built the theme.

    Thread Starter moonchez

    (@moonchez)

    8 years ago

    They’re about zero percent helpful. They keep telling me to upload the graphic in the suggested dimensions which doesn’t help, I’ve even copy/pasted their live preview graphic into my blog and it does the same thing.

    Doesn’t the end result help determine the cause of the problem?

    Big graphic uploaded = clear mobile, HUGE desktop image
    Small graphic uploaded = blurry mobile, normal desktop image

    There’s a piece of the code under header that talks about the width of the device…

    <!– Mobile Specific Metas –>
    <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

    Thanks so much for all of your help.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years ago

    Doesn’t the end result help determine the cause of the problem?

    Not if I cannot replicate the issue, so I’ll probably leave this thread for someone else to.

    Thread Starter moonchez

    (@moonchez)

    8 years ago

    Ok, sorry if the problem was my being unclear. And thanks again for your help.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Header image blurry on mobile’ is closed to new replies.