1 column + 3 columns

Activello
1

Good morning! I love the theme!
I saw in this previous post. Change home page with two post at 100% width and following at 50% width.

https://colorlibsupport.com/t/two-column-category-page/#post-128892

I ask: how do I make the only first post 100% and all post the following 33%?
Thank you

2

Hi,

Glad you love our theme. :slight_smile: Use this Custom CSS in Appearance -> Customize -> Additional CSS,

.half-posts article.post { float: none; }
.blog .page-1 .article-container article.post:nth-child(2), .half-posts article.post { width: 33%; }

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

.blog.home .page-1 article.post:nth-child(2) .post-inner-content { border: none; }

.half-posts article.post:nth-child(3n) {
    clear: left;
    float: none;
    padding-left: 25px;
}

.blog.home .page-1 article.post:first-child .post-inner-content {
    margin-bottom: 30px;
}

If you’re happy with our service, don’t forget to rate us: [Activello] Reviews | WordPress.org

Let us know,

Thanks,
laranz.

3

Thanks for the CSS code. But it does not seem to work well.
You can see the web here. http://www.hacidmagazine.com/
Now it is configured the option of the other support post where there is 2 post at 100% and rest at 50%
Your choice if you apply CCS custom keeps the look every post 100%. Something does not work well in your code.
Thank you

4

Please try using below custom CSS code instead of existing CSS code.


@media (min-width: 768px){
.blog:not(.paged) article.post {
    width: 33%;

}
.blog:not(.paged) .site-main article.post:nth-child(2) {
    width: 33%;
    padding-right: 25px !important;
}

.blog:not(.paged) article.post:nth-child(odd) {
    clear: none;
    padding-right: 0;
}
}
5

I think I did not explain myself well. sorry for my English. The idea is first post 100% and single column. All the following 33% to see three columns
Your CSS shows me all at 33% and a single column

6

This is what the provided custom CSS code should do on using it on your site as shown in the attached screenshot.

Are you not using on your site yet?

7

Right, I replaced my css with yours. He did not add it to the stall. It’s okay.
Only the next page of “old pages” returns to 100% size format. It should maintain 33%

8

You can also see that there are spaces between the posts. Some of them have no space between them and are in contact …

9

I think it would be better only first post at 100% and all others (including old pages) at 50%

10
I think it would be better only first post at 100% and all others (including old pages) at 50%

You can try achieving this by removing the existing used CSS code and using the custom CSS code solution posted in the any of the following topic.

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