Lines to Separate Blog Posts

Hello!

I have full width post excerpts on my page and would like to have the grey line separating them all - currently it only appears after the first and second posts.

I did find some coding on another post but it hasn’t worked on my site.

Thank you,
Lucy

Hi Lucy,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS

#page .post-inner-content {
    border-bottom: 1px solid #dedede;
    padding: 50px 0;
}

Best Regards,
Movin

You are a genius! How can I get rid of the line under the last post on each page? Thank you!

Also, if I want to keep the bottom line I would like to add one above the first post to divide it from the logo. Can you also provide me the code for this option?

How can I get rid of the line under the last post on each page?

Use the below CSS code to achieve this.

#page article:last-child .post-inner-content {
    border-bottom: 0;
    padding: 50px 0;
}
Also, if I want to keep the bottom line I would like to add one above the first post to divide it from the logo. Can you also provide me the code for this option?

Use the following custom CSS code to achieve this.


#page article:first-child .post-inner-content {
    border-top: 1px solid #dedede;
}

Thank you, it looks great with lines above and below, however, when you click on a post it also shows the line above the title. So you have the category inside two lines and then the separator line beneath. This does not happen at the end of the post. Can I get rid of this? Have the lines separating the blog post excerpts as well as lines above and below posts but no upper lines on a full post. Thank you.

To achieve this just change the last above shared CSS code as following.

body.blog #page article:first-child .post-inner-content {
    border-top: 1px solid #dedede;
}

Thank you!

Is it possible to align the start of the full post with the widget on the right hand side?

Out of interest, why is there more space at the bottom of the excerpt than the top on the posts pages? This is reversed on the categories pages where there is more space at the top than the bottom.

Hello,

Can you please send us your website’s url and also would be really helpful if you could provide a screenshot with what you want to achieve.

Thank you,
George.

So, using the code for blog excerpts to be separated by lines that appear before the first and after the last excerpts but not above the full post, I find that the full post is not in line with the widget text - it acts as if the line is there but invisible. See Attached: Not in Line

Secondly, there is more space between the separation lined under the post than above it. See Attached: More Space Below

Thirdly, this is reversed when the posts are shown by category and there is more space above the post than below it within the separation lines. See Attached: More Space Above

Can I get coding to fix these issues?

Could you please share me your site URL where it’s displaying so that i can help you?

Try using below CSS code to resolve it.


body.single-post #page .post-inner-content {
    padding-top: 0;
}
#page .post-inner-content {
    padding-bottom: 30px;
    margin-bottom: 0;
}

Thank you so much, this works perfectly on the posts page and lines up the top of a full post with the widget.

However, on the categories page and search results there is still excess space at the top of the first post - presumably where the text was that has now been removed.

Thank you again! It is so appreciated!

However, on the categories page and search results there is still excess space at the top of the first post – presumably where the text was that has now been removed.

Use the below CSS code to remove it.


body.search #page article .post-inner-content:first-child,
body.category #page article .post-inner-content:first-child{
    padding-top: 0;
}

body.search #main > header.page-header {
    display: none;
}

Then this happens to every post under the first…Attached.

Please use the below CSS code instead.

body.search #page article:first-of-type .post-inner-content,
body.category #page article:first-of-type .post-inner-content{
    padding-top: 0;
}

body.search #main > header.page-header {
    display: none;
}

Thank you so much!

You are most welcome here :slight_smile: