[Support request] Adding columns to blogroll

[Richard]

I use the premium version of GP where it is easy to add columns to the blogroll.
I’m trying to help a beginner achieve the same with the free version of GP.
Is that possible, please? If so, how?
Thank you
🙂
Richard

[Ying]

Hi Richard,

When you say add columns to the blog roll, what does this mean?

Do you mean set the blog posts into columns?

Let me know.

[Richard]

I mean the result that is achieved in the premium version when under Layout / Blog the “Display Post In Columns” option is checked.
As the number of posts increases the excerpts appear in a grid formation determined by the number of columns selected.

[David]

Hi there,

the free version of the Theme doesn’t support columns.
You can try some CSS:

@media(min-width: 769px) {
    .archive .page-header,
    #nav-below {
        flex: 1 0 100%;
        margin-left: 30px;
    }
    .archive .site-main,
    .blog .site-main {
        display: flex;
        flex-wrap: wrap;
        margin-left: -30px;
    }
    .archive .site-main article,
    .blog .site-main article {
        flex: 1 0 calc(50% - 30px);
        margin-left: 30px;
    }
}

@media(min-width: 1025px) {
    .archive .site-main article,
    .blog .site-main article {
        flex: 1 0 calc(33% - 30px);
        margin-left: 30px;
    }
}

This is for 2 column tablet ( 50% ) and 3 column desktop ( 33% ). All with a 30px gap

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Richard]

Thank you very much, David. With your help, and a few tweaks I was able to achieve most of what is needed.
The site header and blog page header are nicely aligned but the post excerpts, although lined up on the left with the headers, on the right seem to be 10 px narrower than the headers. Are you able to guide me on how to line up the right-hand edges, please?
Thank you,
Richard

This is my tweaked code:
/*Adj layout of excerpts*/

@media(min-width: 769px) {
.archive .page-header,
#nav-below {
flex: 1 0 100%;
margin-left: 0px;
margin-top: -10px;
}
.archive .site-main,
.blog .site-main {
display: flex;
flex-wrap: wrap;
margin-left: -30px;
}
.archive .site-main article,
.blog .site-main article {
flex: 1 0 calc(50% – 30px);
margin-left: 30px;
}
}

@media(min-width: 1025px) {
.archive .site-main article,
.blog .site-main article {
flex: 1 0 calc(30% – 30px);
margin-top: -10px;
margin-left: 0px;
margin-right: 10px;
}
}
/*Adj page header above excerpts*/
.page-header { height: 110px;
}
.page-title { font-size: 30px; }

[Ying]

Can you link us to the site?

[Richard]

I’m practising on a test site right now before going to a live production site.
If you go to:
https://rgbtest.siterubix.com/category/blog/
you will see that the blogroll excerpts are a few px narrower than the headers.
All I want to do is to line up the right handside of the boxes with the headers, or narrow down the headers, whichever makes most sense.
Thank you!
🙂
Richard

[Ying]

I see, try add this CSS:

@media (min-width: 1025px) {
    .archive .site-main article:nth-of-type(3n), .blog .site-main article:nth-of-type(3n) {
        margin-right: 0;
    }
}

[Richard]

Thank you, Ying … that’s fixed it! Appreciated.
🙂
Richard

[Richard]

Whoops … sorry Ying, I ddin’t test the solution quite enough.
It works well when there are 3 posts but…
For 2 posts it still leaves a gap.
IS there a way to sort that too please?
🙂
Richard

[David]

Remove your CSS and try:

@media(min-width: 769px) {
    .archive .page-header,
    #nav-below {
        flex: 1 0 calc( 100% - 10px );
        margin-left: 10px;
    }
    .archive .site-main,
    .blog .site-main {
        display: flex;
        flex-wrap: wrap;
        margin-left: -10px !important;
    }
    .archive .site-main article,
    .blog .site-main article {
        flex: 1 0 calc(50% - 10px);
        margin-left: 10px;
    }
}

@media(min-width: 1025px) {
    .archive .site-main article,
    .blog .site-main article {
        flex: 1 0 calc(33% - 10px);
        margin-left: 10px;
    }
}

I assumed you needed a 10px gutter and to correct the title alignment.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Richard]

David … and Ying … I thank you!
That’s cracked it.
🙂
Richard

[David]

Glad to hear that

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts