Featured images / container block images displaying inconsistently

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%;
}

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.

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.

Cool, thanks for explaining, it's really helpful to actually understand the reasons for certain behaviour! :)

For sure - glad to be of help!

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!

Hi there,

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

Thanks!

In private, thanks.

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/

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

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%;
}

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

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

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

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