Header media resizing on scroll if viewed on phone / tablet – clunky

  • Hello,

    I am designing a site using the WP 2017 theme. Everything looks fine on the homepage on a desktop and the homepage content scrolls over the header media smoothly (paralax).

    However, when using a phone (iphone 6+) or a tablet (iPad pro 9.7), when scrolling down the homepage, the scroll is jerky, and the header media can be seen to change size after scrolling down a few centimetres, making for a clunky feel.

    This can be viewed at https://www.icmtrainee.co.uk – perfect on a desktop, clunky on a mobile / tablet.

    I’m happy to edit custom CSS or the theme editor, but I’m not sure which bit of code is responsible for this.

    Please help,

    Thank you,

    Jon

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

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

  • Hi,@jonbedford

    Add this CSS…

    @media (max-width:320px) {

.has-header-image.twentyseventeen-front-page .custom-header
{
height: 200px !important;
}
}

@media (max-width:480px) {

.has-header-image.twentyseventeen-front-page .custom-header
{
height: 220px !important;
}
}

    Hope this will help.

    Thanks.

    Thread Starter jonbedford

    (@jonbedford)

    Hello,

    Thank you very much for replying, but that just changed the height of the header image. Even with that new height after adding that CSS, when you initially scroll down, the image can be seen to change size in the background and the scrolling is not smooth.

    Interestingly you don’t get the same problem if you resize a desktop browser window to be narrow like the iPhone, so I’m not sure what’s going on.

    See for yourself if you have a phone / tablet
    icmtrainee.co.uk

    Any help much appreciated.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Header media resizing on scroll if viewed on phone / tablet – clunky’ is closed to new replies.