How to get only ONE feature post on home page

Activello
1

Hi. Right now, all of our posts on the homepage are in a grid. Is it possible to just make the most recent post a larger full width feature? I have seen several examples here where the TWO most recent are featured … how about ONE?

thanks!!

site: www.CareLiving.org

2

Hi @chatmatt,

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

You can try achieving this by using the custom solution shared in the following topic.

https://colorlibsupport.com/t/how-to-make-only-one-post-full-width-and-the-rest-in-grid/

Before using the custom CSS code shared in the above topic you have to remove the following custom CSS code you have used on your site.

@media (min-width: 768px){
body.blog.home .page-1 article.post:first-child,
body.blog.home .page-1 article.post:nth-child(2) {
    width: 50%;
    clear: none;
    float: left;
}

body.blog.home .page-1 article.post:first-child {
    padding-right: 25px !important;
}
body.blog.home .page-1 article.post:nth-child(2) {
    padding-left: 25px !important;

}
body.blog.home .page-1 article.post:nth-child(2) .post-inner-content {
  padding: 0 0 50px;
}
}

Best Regards,
Movin

3

I followed that link, as well as several others on the same topic - I removed my custom CSS and posted yours - it creates TWO featured full-width images followed by a grid. I would like just ONE. I have this new code currently installed. Please take a look and let me know why the code provided gives me two full-width. Thank you!

4

Hi, how do I remove the extra space above my image on the attachment page?
(I already removed the title and ‘posted-on’ info, and I would like to keep the previous and next buttons…)

5

@chatmatt It is not working on your site because in the custom CSS on your site you have added the following incorrect code that doesn’t have closing bracket.


.navbar-default div.navbar-collapse {
    display: table !important;
    margin: 0 auto;
    float: none;

To resolve the issue please either add closing bracket to the above CSS code or try adding provided CSS code at the top of your custom CSS code.

6

@jackiemon To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/activello/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

7

I have done the update posted here … and although it did make for a single featured post at the top, the READ MORE has drifted down to the second post (small), which throws things off, and it also has made it so that the count is odd for posts on the home page, making an extra space at the very bottom. Again, see the home page … it will probably explain it better than I did. A step in the right direction, but also two new problems.

8

To hide the read more link from second post try using the below CSS code.

body.blog.home .page-1 article.post:nth-child(2) .read-more{
  display: none;
}

You can control how many posts to display on your blog home page as described on the following page so that it will not display odd.

https://colorlibsupport.com/t/how-to-limit-blog-posts-that-display-on-home-page/