Header Image not responsive on iOS

Hi

My header image on my Intro website (www.stationhouse.co.za) is not responding well on iPhone: http://imgur.com/SPTcUPy

As a result, the landing screen looks terrible.

The copy also goes over the borders.

Is there something I can do?

Hello,

Try to add custom css code below:

@media only screen and (max-device-width: 736px) {
    #header-banner {
        background-attachment: scroll;
    }
}

You can apply the code from WP admin > Appereance > Custom CSS.

Best Regards!

Not working…

Apologies, it solves the issue on iPhones, but not on iPads.

I played around and changed the “max” from max-device-width to “min” and then it worked on the iPad, but not on the iPhone.

Is there a comprehensive solution? As we’re live with the website, we really want to sort this out ASAP.

Hi again,

Yes, attachment scroll is correct solution for safrai browsers. in order to target devices up to iPad in landscape mode then you should use following code:

@media only screen and (max-device-width: 1024px) {
    #header-banner {
        background-attachment: scroll;
    }
}

and in order to target devices up to iPad portrait then change it to 768px like this:

@media only screen and (max-device-width: 1024px) {
    #header-banner {
        background-attachment: scroll;
    }
}

in case that you want to be explicit you can use media query as explained here https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Best Regards!