Header image severely cropped on phone

  • Resolved ludwigkeck

    (@ludwigkeck)


    4 years, 3 months ago

    The header image option added in Options for Twenty-Twenty-One works very well displayed on a desktop – laptop machine. On an iPhone there seems to be just a very, very small crop, apparently of the upper left corner of the image. This is enlarged across the iPhone screen.

    I can supply screen captures to illustrate, but I don’t know how to provide them.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Oliver Campion

    (@domainsupport)

    That’s annoying! Thanks for highlighting it, will make sure it’s rectified in the next update and get back to you!

    Oliver

    Plugin Author Oliver Campion

    (@domainsupport)

    Nice header image.

    OK, so I think we’ve sorted this. It’s Apple’s iOS. It breaks the fixed position of the background image because rendering it takes too much processing power on mobile devices.

    In fixing it, however, we’ve found that the image is not centring when being covered as it should so we’ve fixed that too … however, you will probably want to add this CSS to your “Customizer – Additional CSS” so that the image position is back to the top for your background image …

    #masthead-wrapper {
background-position: center top;
}

    Hope that helps?

    Oliver

    Thread Starter ludwigkeck

    (@ludwigkeck)

    That does the trick!

    Thank you! And a very Merry Christmas to you!

    Plugin Author Oliver Campion

    (@domainsupport)

    Great news. Marking this as resolved.

    Happy Christmas!

    Oliver

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Header image severely cropped on phone’ is closed to new replies.