Homepage Layout

Activello
1

Hey guys,

I combed the answers in this support forum so I know there’s a couple threads where this has already been answered. However, I tried the CSS code provided in those threads and none worked for me.

I’m looking to modify the homepage so there’s only one full width post (vs. two) followed by the 2 column grid. See screenshot attached. That layout works if the full width post and 2 column grid was swapped. I would also like for the 2 column grid to be aligned as much as possible.

Appreciate any help.

Cheers

2

Screenshot attached! It failed to upload in the original post.

3

Hi @adampuddicombe,

Thank you for your question.

You can achieve this by using custom CSS solution posted in the following topics.

https://colorlibsupport.com/t/how-to-make-only-one-post-full-width-and-the-rest-in-grid/#post-58491
https://colorlibsupport.com/t/a-few-questions-how-to-make-only-the-first-post-full-and-regarding-font/#post-59417

If the custom CSS solution doesn’t work on your site then could you please share me your site URL where you are using it so that i can troubleshoot it?

Best Regards,
Movin

4

Thanks Movin. I cleaned up my CSS code and it’s working now.

Another question. I’m looking to reduce the width (and center) the full width post.

URL is dev.sportsbusinesscanada.com

5
Another question. I’m looking to reduce the width (and center) the full width post.

To achieve this please use the below custom CSS code.

@media (min-width: 768px){
.blog.home #main article.post:nth-child(odd) {
    width: 70%;
    margin: 0 auto;
    float: none;
    display: block;
}
}
6

Thanks Movin. However, that’s now effecting the two column posts (particularly the third/odd post). Screenshot attached.

7

If you want it to only affect first post then please try using the below custom CSS code instead of above.

@media (min-width: 768px){
.blog.home #main article.post:nth-child(1) {
    width: 70%;
    margin: 0 auto;
    float: none;
    display: block;
}
}