[Resolved] full width page header images not responsive

Home Forums Support full width page header images not responsive

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #330929
    éric

    Hello,

    i realized I had a problem with my full width header images on phone : there are not responsive at all.

    check this : http://www.quatrepiliers.fr/centre-paris/tai-chi-qi-gong/

    is there anything i can do?

    thanks in advance,

    veronique

    update :

    oh, would this be the answer :

    Unfortunately that’s just the nature of background images – it has to do with the aspect ratio.

    The ratio on a desktop is different than on mobile, but the image still has to fill the area, so certain part of it aren’t shown.

    One solution is to create an image just for mobile, then apply it using some CSS:


    @media
    (max-width: 768px) {
    .blog .generate-content-header {
    background-image: url( ‘URL TO YOUR MOBILE BACKGROUND IMAGE’ );
    }
    }

    Adding CSS: https://generatepress.com/knowledgebase/adding-css/

    https://generatepress.com/forums/topic/responsive-page-header/

    or has something new came up in the meantime? as i’m using a different header image on each of the main pages ?

    i shall have to do something like, work with the page id, is it not ?

    @media
    (max-width: 768px) {
    body.page-id-23 .generate-content-header {
    background-image: url(“smaller image for mobile”);
    }
    }

    #331062
    Leo
    Staff
    Customer Support

    Hi there,

    For that specific page you provided, you could try this CSS:

    .generate-content-header {
        background-position: top center;
    }

    It doesn’t make it responsive, just make it crop a nicer.

    If not then using the CSS to switch the image out for mobile is still the way to go. And yes page id should work:

    @media (max-width: 768px) {
        .page-id-xx .generate-content-header {
            background-image: url(“smaller image for mobile”);
        }
    }
    #331064
    éric

    Thanks a lot, Leo. I’ll do that.

    Oh, any idea what the best size is for mobiles? 768px ? or would that be too much? I’ll check. But maybe you know.

    #331093
    Leo
    Staff
    Customer Support

    I would say choose something that’s portrait and the main content of the image is in the center proximity 🙂

    #331095
    éric

    right! sure, clear !

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