[Resolved] Featured images / container block images displaying inconsistently

[David]

As i mentioned above it will require some CSS to force the featured image to 100% width.
Try this:

.featured-image.page-header-image {
    max-width: unset;
}
.featured-image.page-header-image img {
    width: 100%;
}

[_blank]

Thanks, added this to Customize > Additional CSS.

It did force the image full-width, but I thought we were looking into why this wasn’t happening in the first place? I made several huge images to test, 10k, 50k px etc., and no matter the width, they never extended to the sides. I prefer not to clutter with CSS if possible so if there’s a bug or something with featured images it’d be great to look into that.

[David]

Unless disabled there are default functions in WP that will limit the max width of an image to 2560px. Even if you upload a 10000px wide image it will resize it to 2560px.

Featured images are controlled by the Customizer > Layout > Blog –> Featured image settings and for that to work correctly they have to be within a grid-container.

Which is why they require CSS to make them fill the width of any screensize.

[_blank]

Cool, thanks for explaining, it’s really helpful to actually understand the reasons for certain behaviour! 🙂

[David]

For sure – glad to be of help!

[_blank]

Hi there,

Unfortunately, while we solved this for Pages, we now have the same issues for Posts of featured image not sitting flush to top of the page / displaying full width.

For full width we tried below but didn’t work:

.featured-image.post-header-image {
    max-width: unset;
}
.featured-image.post-header-image img {
    width: 100%;
}

For sitting flush to top, we’re not sure how to solve it, as sitting flush is the default behaviour for ‘Default’ content container layout Pages…so why not Posts?

Thanks!

[Ying]

Hi there,

Can you link us to your site again? As the topic is marked as resolved your site info has been erased.

Thanks!

[_blank]

In private, thanks.

[Ying]

Posts have different structure than pages, so the CSS won’t work for posts.

In David’s reply here: https://generatepress.com/forums/topic/top-menu-covering-featured-image-content-blocks/#post-2076468

He suggested using a page hero to replace the posts featured image, I would recommend doing this as well.

Give block element – page hero a try for posts:
https://docs.generatepress.com/article/block-element-page-hero/

[_blank]

Hi there,

Is there a CSS that would work for Posts?

Shouldn’t featured images just work as standard? It’s an essential part of WordPress and shouldn’t really require a workaround.

Many thanks

[David]

Change the other CSS for this:

.featured-image.post-header-image,
.featured-image.page-header-image-single {
    max-width: unset;
}
.featured-image.post-header-image img,
.featured-image.page-header-image-single img {
    width: 100%;
}

[_blank]

Didn’t work; still neither full width nor flush to top, as per original example.

[Ying]

Go to customizer > layout > blog, set thefeatured image location for poststo above content area.

[_blank]

We don’t see that option in the main customiser, or the post layout section?

[David]

You need to enable the Blog Module in Appearance > GeneratePress
Then follow Yings steps:

https://generatepress.com/forums/topic/top-menu-covering-featured-image-content-blocks/page/2/#post-2109851

[Author]

Posts