Support » Theme: GeneratePress » Columns in GP 3.0

  • Resolved Karis

    (@askel45)


    Hi. I created post columns using flexbox in GP 3.0. However, I am not sure what the equivalent of grid-gap in CSS grid is for flexbox, so using space-between does work, but only when there is a similar number of columns. I have set flex-basis to show three columns in 1025px> but when the last articles in the column are two, there is a blank space left between them as shown here. Is there a way to force the last flex items to stay on the left side next to each other?

Viewing 11 replies - 1 through 11 (of 11 total)
  • Theme Author Tom

    (@edge22)

    Hi there,

    This is more of a CSS question than a theme question. The best way to handle grid gap in flexbox is to use margin.

    This article may help: https://coryrylan.com/blog/css-gap-space-with-flexbox

    I like putting a negative margin-left on the block container, then adding the positive margin-left to each container item.

    Hope this helps!

    Thread Starter Karis

    (@askel45)

    I tried that before posting here (same article). It didn’t work. I guess I will go back to the CSS grid. It’s so much easier to work with it than flexbox for an amateur like me.

    Edit: This CSS works when there is no page navigation (e.g. on search pages if the results are less than the number of posts per page). But does not work when there is page navigation because it is the last flex item and I have set its flex basis to 100%.

    .separate-containers .site-main::after {
      content: '';
      flex-basis: 32.5%
    } 
    Thread Starter Karis

    (@askel45)

    Or alternatively, is there a way to move the bottom navigation in homepage and archives out of the .site-main class? Perhaps unhook it and hook it before footer? I have tried all tricks, even trying to target second last element in the flex but nothing works when the navigation is there. I still get the spacing when the last items are an even number.

    David

    (@diggeddy)

    Hi there,

    Try this:

    @media(min-width: 769px) {
        .site-main {
            display: flex;
            flex-wrap: wrap;
            margin-left: -1em; /* offset article gaps */
        }
        /* Force navigation to fill 100% of row */
        .site-main nav {
            flex: 1 0 100%;
        }
    
        .site-main article {
            width: calc(50% - 1em); /* remove margin-left from width */
            margin-left: 1em;
        }
    }
    Thread Starter Karis

    (@askel45)

    @diggeddy thanks for your input. One small issue is that the code leaves a margin on the far-left. The far-right has no margins though. Do you have a solution to this?

    Edit! seems adding !important to site-main’s -1em solves the issue. But I would appreciate a workaround to stop using the !important.

    Solved with aqdding .no-sidebar to .separate-containers.no-sidebar .site-main. Thanks everyone!

    Thread Starter Karis

    (@askel45)

    @diggeddy last question, the last one or 2 flex items (except the last one) leave a margin at the bottom (the one occupied by site-main>*) when there is no page navigation (e.g if a search term returns less number of items than the pages assigned per page). Is there a way to remove this margin? See this image https://prnt.sc/uhxhq5

    solved using .site-main{margin-bottom:0;}.site-main>*,.site-main>:last-child{margin-bottom:18px}

    David

    (@diggeddy)

    Glad we could be of help.

    Works fine, but how can I exclude it in the mobile version?

    My website.

    Hi @face0ff

    you can you set CSS resposnively using media queries – this document explains how:

    https://docs.generatepress.com/article/responsive-display/

    If you need any further assistance please raise a new support topic as this is resolved.

    Thank you David! I found a solution. I only set the rules only desktop.

    /* 2 Columns for Archive & Blog Page for Desktop */
    @media (min-width: 1025px) {
    body.archive .site-main, body.blog .site-main {
            display: flex;
            flex-wrap: wrap;
            margin-left: -1em!important; /* offset article gaps */
        }
        /* Force navigation to fill 100% of row */
    body.archive .site-main nav, body.blog .site-main nav {
            flex: 1 0 100%;
        }
    
    body.archive .site-main article, body.blog .site-main article {
            width: calc(50% - 1em); /* remove margin-left from width */
            margin-left: 1em;
        }
    }
    • This reply was modified 8 months, 1 week ago by face0ff.
    • This reply was modified 8 months, 1 week ago by face0ff.
    • This reply was modified 8 months, 1 week ago by face0ff.

    Glad to hear that!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Columns in GP 3.0’ is closed to new replies.