Header Image not displaying correctly

  • I have a header image JPG of size 1900x1100px approx.
    It displays ‘enlarged’ on a browser, and does not scale for mobile devices.

    I seem to remember when I created/amended the header image, turning off the scaling feature, but I cannot see where one re-enables that, if I am correct in suggesting this feature, but i could be wrong it was a while ago.

Viewing 3 replies - 1 through 3 (of 3 total)

  • My site is experiencing the same thing.
    I see that the srcset attribute was automatically generated, and the smaller images were automatically created, when I uploaded the desktop size image.
    Perhaps I am missing something!

    Thread Starter faster builder

    (@fasterbuilder)

    Did you resolve your problem, mine is still outstanding.

    markx2

    (@markx2)

    Here is the Additional CSS I ended up using, after much trial and error.
    It looks great on Android, very good on an iPhone, great on Firefox and Edge on Windows, there are still some sizing issues with Chrome on Windows.
    You may have to play with the vw height percentages if your header size is different than mine.

    ——–
    .has-header-image .custom-header-media img,
    .custom-header-media iframe,
    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    object-fit: initial;
    height: auto;
    display: block;
    min-width: initial;
    min-height: initial;
    }

    .home .custom-header-media {
    height: 65vw !important;
    }

    @media (max-width: 767px)
    {
    .home .custom-header {
    height: 50vw !important;
    }

    .home .custom-header-media {
    height: 45vw !important;
    }
    }


Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Tags