Grid Layout For Posts

Sparkling
1

Hello, I am really interested in this as well. I tried it out but my page got all messed up. Can you please help me with this, as this makes my blog perfectly as I want it if I get it to work.

Referring to post on old post: https://colorlibsupport.com/t/grid-layout-for-posts/

Best regards
Orlando

2

Hi Orlando,

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

I think you are referring to white background issue. If it is so then you can resolve it by using the below CSS code along with the shared CSS code on other thread.

.blog.home #primary #main {
    background-color: #fff;
    overflow: hidden;
}

Best Regards,
Movin

3

Hello again, added the extra line of code to css, but it still looks like this (screenshot).
Hope you have a solution cause if this looks visually good after some tweaking, I will say this is perfect.

Best regards
Orlando

4

Where have you added that CSS code on your site?

I visited your site but didn’t find the provided CSS code anywhere in the web page.

Please advise.

5

Of course, I could not keep it up there, as the site is online and getting views and it looked so ugly with, but it looked exactly like the screenshot provided. I will put the code back there now, but I hope you will look at it asap and see if/and what is wrong, as I will not want to have it look like that for too long. I hope you understand, and I am awaiting your reply.

Best regards
Orlando

6

And to add to this, I have tried both having the code within the previous code from the other tread, and also separate from it, it still yields the same results. Please help me.

7

Also I almost forgot to tell, but as you can see in the provided screenshot, the box for older posts keeps showing up at an unwanted location on the page. I hope you get the idea out of the screenshot.
I will leave my page as is now, so you could have a look at it:

Best regards
Orlando.

8

I troubleshooted it on your site and it seems happening due to Jetpack Older Posts pagination button. You can try resolving this issue by using the below CSS code.

@media (min-width: 768px) {
 .blog.home #primary div#infinite-handle {
    clear: both;
}
}
9

Thanks a lot, that made it look better and the older posts button got to where it should.
But visually it still does not look that great, is it possible to make it look like the provided photoshopped screenshot?

With each post separate from each other, not just mashed into the same white area. Also to make some more padding between the text and the borders. If that would be possible this would be completely perfect, I am so close to getting this blog looking like I want. And thanks a lot for all the help so far, you guys are awesome!

Best regards
Orlando

10

Please try using the below CSS code to achieve this.



body.blog.home #primary #main {
    background-color: transparent;
}

@media (min-width: 768px){
body.blog.home #primary #main .post-inner-content{
  padding: 0 8px 30px;
}
}
11

Thank you so very much, I am the most grateful for all the help. Now it looks and functions exactly how I want it, thank you so much for great support :slight_smile:

Best regards
Orlando

12

You are most welcome here :slight_smile: