[Resolved] Page Header dynamic feature image not responsive for tablet and mobile

Home Forums Support [Resolved] Page Header dynamic feature image not responsive for tablet and mobile

Home Forums Support Page Header dynamic feature image not responsive for tablet and mobile

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #613155
    tienanh

    Hi Generatepress Team,

    I am trying to use your page header. The image (dynamic feature image) shows up beautifully but just on desktop, not responsive for tablet and mobile.

    Is that some additional work for you or is that some mistake on my end. Please give me some advice.

    PS: I have check the forum but could not find the answer.

    Thanks.

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #613224
    David
    Staff
    Customer Support

    Hi there,

    can you provide a link to the site? You can edit your original post and use the Site URL field for privacy

    #613944
    tienanh

    Hi David,

    Please find below the link to a test post:

    https://willingo.com/ph-test/

    Please have a look and let me know what I should do?

    Thanks.

    PS: Looks like the Site URL field is only available when a new support topic is opened.

    #614194
    David
    Staff
    Customer Support

    OK, so its a landscape image on full height page, which by default is set to cover. So it will be cropped on mobile. Choices:

    1. Replace the image on mobile for a portrait image.
    2. Stop using full height on mobile and set the image to fit horizontally.

    Let me know which option and i can provide the CSS

    BTW – You can Edit the first post in a topic to get access to the Site URL field and then just resubmit

    #614275
    tienanh

    Hi David,

    Could you please give me CSS for both choices. I will test and see which one is best.

    Is there a way to use both of them, say, one choice for one template and the other choice for another?

    Many thanks.

    #614301
    David
    Staff
    Customer Support

    OK:

    Option 1

    /* Switch Image on Mobile */
    @media (max-width: 768px) {
        .generate-content-header {
            background-image: url('image_url.jpg')
        }
    }

    Option 2

    /* Adjust container height - change PX to suit */
    @media (max-width: 768px) {
        .generate-content-header {
            height: 300px !important;
        }
    }

    To apply it to specific page headers you would need to use the Page Header ID. So to effect just your current page header you would replace .generate-content-header { with #page-header-12061 {

    The ID number can be found by editing the page header and looking at the browser URL – look for post=####

    #614513
    tienanh

    Many thanks David. That’s very useful and clear instructions.

    Don’t you have a rating system in place? I’d be pleased to hit five-star for your support.

    #614522
    David
    Staff
    Customer Support

    You’re welcome. We don’t have a support rating. We all try our best.

    #614534
    tienanh

    Understood! Thanks. Happy to have your help.

    #659840
    David

    On this one more question. It also works with Elements Header?
    I need to change the image for mobile by another responsive image.

    Thanks. David.

    #659891
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can open a new topic for your question?

    Thanks!

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