[Resolved] full width page header images not responsive

[Eric]

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”);
}
}

[Leo]

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”);
    }
}

[Eric]

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.

[Leo]

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

[Eric]

right! sure, clear !

[Author]

Posts