Home page header image on mobile and tablet

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.

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.

Try adding this CSS:

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

And add the hero-class to the header Element Classes

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

Sorry made a mistake in the code, edited the above :)