Remove blank space in one post full width and the rest in grid

Activello
1

Hi Movin,

Firstly I would like to say that this theme is really good, clean, and easy to set-up.

I tried to arrange my front-page to have only one post in full width and the rest in grid, as shown in this post:
https://colorlibsupport.com/t/how-to-make-only-one-post-full-width-and-the-rest-in-grid/

So far, I have successfully done it. But, there is a slight problem with the blank space in the first post in the grid, which made it slightly off compare to the second post in the grid. Attached is the screenshot to better explain my problem.
Kindly need your advise to remove this blank space.

2

Hi @ramdani,

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

You can try achieving this by using the following CSS code instead of the code shared in that topic.


@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;
  padding-top: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

It works perfectly!
Thank you very much Movin.

4

You are most welcome here :slight_smile: