How to make only one post full width and the rest in grid

Activello
1

Hi! Currently the default is to show the first two posts in full width, and the rest in grid.

Having trouble figuring out how to make only the first post full width, and the rest of the posts from post number 2 in grid format … please help :frowning:

2

Hi @vivienviv,

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


@media (min-width: 768px){

body.blog #main.page-1 article.post:nth-child(2) {
    width: 50%;
    float: left;
    clear: left;
    padding-right: 25px !important;
}

body.blog #main.page-1 article.post:nth-child(2) .post-inner-content{
  border-bottom: 0;
  margin-bottom: 0;
}

.blog.home #main article.post:nth-child(odd) {
    clear: none;
    padding-right: 0 !important;
    padding-left: 25px !important;
}

.blog.home #main article.post:nth-child(2n+2) {
    clear: left;
    padding-right: 25px !important;
}
.blog.home #main article.post:nth-child(even) {
    padding-left: 0 !important;
}
    
}

Best Regards,
Movin

3

Have you had success with this code? I added it to my CSS but there was no change.

4

@ehutchings I have also shared the similar solution in the following topic which is working for others

https://colorlibsupport.com/t/a-few-questions-how-to-make-only-the-first-post-full-and-regarding-font/

If the solution doesn’t work for you then 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.