I want to have full length heading on single posts

[Rohan Verma]

Hello team,
1) I want to have full length heading on the single posts, how to achieve that?
like this > https://prnt.sc/o4o5xu
2) How to show posts like this on mobile devices on homepage > https://prnt.sc/o4o6sh

[Leo]

Hi there,

1. You can use our header element for that:
https://docs.generatepress.com/article/how-to-create-a-page-hero/
https://docs.generatepress.com/article/header-element-overview/

Then use template tags for the content:
https://docs.generatepress.com/article/header-element-template-tags/

2. Can you guide me to your posts page?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rohan Verma]

our current homepage

[Leo]

Give this CSS a shot:

@media (max-width: 768px) {
    .entry-summary {
        display: none;
    }
    .blog .inside-article, archive .inside-article {
        display: flex;
        flex-direction: row-reverse;
    }
    .no-featured-image-padding .post-image {
        margin: 0 10px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rohan Verma]

And one thing leo, after adding the elements I am able to show the header in full length but there is a clear separation between the content like this > https://prnt.sc/o4ocb7 and the heading. How to merge them.

[Rohan Verma]

and also how to make a post stay on the homepage. We have selected recent posts on the homepage but want a particular post to stay on the top of the list.

[David]

Hi there,

1. so do you want the background of the Heading to be in white and extend the fill width of the screen? If so you can do this by editing the header element and giving it a background color and maybe some bottom padding.

We can then provide some CSS to remove the space between header element and content. Let me know if thats what you require.

2. So Edit the post you want to Stick to the top, and in the Status and Visibility settings check: Stick to the top of the blog / front page

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rohan Verma]

Yes sure for the title please share the css

[David]

Try this:

.single-post .page-hero {
    padding-top: 0;
}

.single-post .inside-page-hero {
    padding: 40px;
    background-color: #fff;
    box-sizing: border-box;
    margin-bottom: -12px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts