[Resolved] How to limit content width but make the featured image full-width

[Sara]

I want my featured image to show as full-width, and the content below it to to be a maximum of 700px.

What is the proper way to do this?

I’m using GP Premium and have headers activated, but can’t seem to separate between the image width and the post content width. If I limit the content – the image is also limited.

TIA!

[Sara]

I figured it out. Thanks!

[David]

Hi there, that looks like a good solution. You can of course use the GP Page Headers, just for information:

https://docs.generatepress.com/article/page-header-overview/

[Sara]

Thanks. I actually am using the GP headers… or so I thought.

[David]

Thats, great – if you are then you can set the Page Header to Full width, and then define your content width in the Customsier > Layout > Container.
Site looks great – love that style!

[Sara]

That just doesn’t work for me. If I do it, then it changes the width of the header as well. No idea why.

Anyway, this works so maybe I should leave it?

But now I’m trying to do another thing: I want to have the “perfect Hero image” where the width is always 100% but the height is equal to the screen size. Do you happen to have an option for that?

[Leo]

Then you would need to use page header with the full screen option:
https://docs.generatepress.com/article/page-header-content/#fullscreen

[Sara]

Oddly that makes the image appear twice!

[Leo]

Can you try removing the featured image in the actual post?

[Sara]

There is no featured image. Just the header.

[Leo]

There isn’t a featured image added for that post here?
https://docs.generatepress.com/article/adding-featured-images/

[Sara]

No, but it turned out there was a code snippet that was messing this up. Your last question about the featured image made me realize that somehow. It works great now. Thanks for your help!

[Leo]

No problem!

[Author]

Posts