Content in the box

Hi there,

should be possible with some CSS - do you have a site setup where i can take a look at what needs to be done.

For example, here's the link: https://www.masteryblogging.com/siteground-black-friday-deal/
I want it on all the posts only and NOT pages.

You can re-hook the header element to inside the content area using the filter provided here:

https://docs.generatepress.com/article/generate_page_hero_location/

Your code for single posts, placing the header element where the featured image is would look like this:

add_filter( 'generate_page_hero_location', function( $location ) {
    if ( is_single() ) {
        $location = 'generate_before_content';
    }

    return $location;
} );

Not sure if I fully understand.

GP is using this layout: https://docs.generatepress.com/collection/add-ons/

I want to achieve same but no sidebar and the box should be in middle like Matthew Woodward is using in his site: https://www.matthewwoodward.co.uk/seo/keywords/keyword-research-template/

I think we are a bit confused about what you are trying to achieve.

Are you basically wanting to have everything in a box? So like reduce the width of the current page hero?

I want exactly the same as GP is using on their docs. But I don't want sidebar. GP is using left sidebar but I don't want any sidebar.

I just want to achieve the same as GP is using on their docs. Here's the link: https://docs.generatepress.com/article/merging-header-navigation-content/

I want to make it on the POST only.

There isn't anything special about that page.

Are you referring to the border and shadow etc?

Yes, I thought its a box.

Something like this?

.single .site.grid-container {
    border: 1px solid #e9e5e5;
    box-shadow: -19px -22px 49px -19px rgba(0,0,0,0.1);
}

Yes, it is good now but I want to modify it more like after applying this CSS, only content covered.

I want to take inside H1 with author name and Last Updated date + content area all should be in one.

Looks like you've figured out?
https://www.screencast.com/t/Y51uCrpnI

yes I have figured it out but could you help me..there is no gap from the top..I want some gap between the header and border-top.

Try this CSS:

.single-post #page {
    margin-top: 40px;
}
/* Mobile spacing */
@media(max-width: 768px) {
    .single-post #page {
        margin-top: 20px;
    }
}