[Support request] Home page header image on mobile and tablet

[techie09]

Hello,

I have a header image on the home page with some content along side. When I view it on the mobile phone or tablet, the content overlaps the image making it look non-responsive. Please suggest how to fix this issue.

What should be the ideal size (width and height) of the header image for home page?

Thanks in advance

GeneratePress 2.1.4

GP Premium 1.7.2

[David]

Hi there,

you could move over to the new Header Element module:

https://docs.generatepress.com/article/header-element-overview/

This provides separate padding for mobile, and you could increase the top padding and reduce the bottom padding for the mobile. This would push the content down into some white space.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[techie09]

Thank you for guiding me through. I was able to set spacing for mobile device using the offset site header height setting under site header in elements and mobile device padding under page hero.

I am still confused about the image. Either my image size is incorrect or something is wrong. Is the image not suppose to resize when viewed on mobile device. If you can check my website home page now, it looks fine on the desktop. On the mobile device, the content is moved below the image which is fine, but the entire image is not visible. Only the left side of the image i.e. the white part is visible. The right side of the image has graphics on it, as you can see on desktop, it is not visible on the phone.

What should be the ideal image dimensions for the header image?

Thank you.

[David]

Try adding this CSS:

@media (max-width: 768px) {
    .hero-cover {
        background-size: contain;
    }    
}

And add the hero-class to the header Element Classes

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[techie09]

I am afraid but this did not help. It looks still the same.

[David]

Sorry made a mistake in the code, edited the above 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts