[Support request] Page Header image not responsive

Home Forums Support Page Header image not responsive

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #275019
    Damiaan van Vliet

    Hi team,
    For some reason I cannot get the Page Header image responsive.
    When I follow the instructions video I don’t see the option featured image anymore.\
    So I only can have a background image and that’s not responsive.

    What to do? Thanks!

    GeneratePress 1.3.44
    GP Premium 1.2.94
    #275038
    Leo
    Staff
    Customer Support

    Hi Damiaan,

    Feature image should still be there as it’s a WordPress feature.
    It should be the last metabox on the right hand side.

    If it’s not showing then there might be a plugin conflict, then try #1 here: https://docs.generatepress.com/article/debugging-tips/

    Let me know if this helps.

    #275179
    Tom
    Lead Developer
    Lead Developer

    If the image is being used as a background image, you might want to do this:

    .page-header-content {
        background-position: center center;
    }

    That will at least center the image on all devices. Thinking about adding this into the plugin by default.

    #275382
    Damiaan van Vliet

    @Leo thanks for reply. the normal featured image I know but in the instruction movie about the PageHeader there is a different mentioned. But anyway that is not exactly what I meant.


    @Tom
    , thanks, adding that CSS code is almost right for me but still the image is not fully visible when resizing the screen. Because the top header image is a photo of a person it would be great it resizes completely. Hopefully that’s possible.

    Thanks!

    #275544
    Leo
    Staff
    Customer Support

    The code isn’t meant for re-sizing the image – background images are not responsive by nature.

    I think your best bet is to specify different images if your one background image doesn’t work on multiple screen sizes. You can do it with this CSS:

    @media (max-width: 768px) {
        .generate-content-header {
            background: url(my-url);
            background-size: cover;
            background-position: center center;
        }
    }

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

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