[Support request] Adding columns to blogroll

Home Forums Support [Support request] Adding columns to blogroll

Home Forums Support Adding columns to blogroll

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #2167508
    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

    #2167520
    Ying
    Staff
    Customer Support

    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.

    #2167830
    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.

    #2167831
    David
    Staff
    Customer Support

    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

    #2168253
    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; }

    #2168256
    Ying
    Staff
    Customer Support

    Can you link us to the site?

    #2168362
    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

    #2168385
    Ying
    Staff
    Customer Support

    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;
        }
    }
    #2168637
    Richard

    Thank you, Ying … that’s fixed it! Appreciated.
    πŸ™‚
    Richard

    #2168643
    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

    #2168927
    David
    Staff
    Customer Support

    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.

    #2169063
    Richard

    David … and Ying … I thank you!
    That’s cracked it.
    πŸ™‚
    Richard

    #2169478
    David
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.