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

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

Home Forums Support Home page header image on mobile and tablet

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #674035
    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
    #674265
    David
    Staff
    Customer Support

    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.

    #675140
    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.

    #675175
    David
    Staff
    Customer Support

    Try adding this CSS:

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

    And add the hero-class to the header Element Classes

    #675768
    techie09

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

    #675795
    David
    Staff
    Customer Support

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

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