Remove border under last post on homepage

Activello
1

Hello dear Support Team,

under every post in the theme there’s a fine border.

.post-inner-content {
    border-bottom: 1px solid #ededed;
    padding: 20px 0;
}

On the homepage, I would like to delete this border, but only for the very last post on the homepage right before the footer. Can you help me?

With best regards,
20something

2

Hello there,

I hope you are doing well today.

You can use the following CSS code to remove the border on the last post item by going to Appearance > Customize > Additional CSS and pasting it there.


/*Remove last border for post list*/
.post-inner-content:last-child {
    display: none;
}

Please update me on the results.

Best Regards,
Support

3

Hello,

I tried the code. The result was that all the posts on the page were gone. I then tried

.post-inner-content:last-child {
    border-bottom: none;
}

And the result was that the borders were gone under every post, not just the last one. For some reason it seems to recognize every post-inner-content div as the last-child. Any ideas?

The site is here.

With best regards,
20something

4

Hey again,
Hope you’re doing well today

This is a rather unusual issue.
The problem here is that the border is applied to the inner element which is essentially the child of an article element.

Now if we use the last child selector, we’re basically looking for every inner element and applying it to the last one in the container, so essentially, the CSS is being applied the last inner element in every article.

If it was that all the inner elements were in one article element, then the CSS would work, however, it’s now pretty difficult to apply this CSS to the final element. I could target the post ID and it would work there, however, that probably won’t be the bottom post forever, so it would quite likely stop working then.

I hope you understand what’s happening here, and I’m sorry about that issue.

Best Regards,
Support

5

Hello,

thank you for your explanation! That’s what I thought was happening. Can you provide me with the code that targets the post ID? I will then manually change it every time the bottom post changes.

With best regards,
20something

6

Instead of using specific post ID you can achieve it by using the below custom CSS code.

body.blog .article-container > article:last-child .post-inner-content {
    border-bottom: none;
}
7

Hello Movin,

thank you very much! This works perfectly!

With best regards,
20something

8

You are most welcome here :slight_smile: