Site logo

Archived topic

Page Header image not responsive

4 replies · Started by Damiaan van Vliet on February 6, 2017

Viewing posts 1–5 of 5

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!

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.

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.

@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!

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/

This archived topic is closed to new replies.