FlatAwesome +: Node dual column spacing

[WildcatMedia]

I'm trying to sort through an issue with a style I'm customizing. To work through it, I have created a clean FlatAwesome+ theme with zero modifications, and I have the issue even there.

Essentially, I have the forum set up in dual column node--two columns, and I have also enabled Node Spacers. But, this only puts a space between top and bottom of the nodes. I seem to be able to modify the space on top and bottom, but can't get anything to work for the spacing between the dual nodes. (If I try to enable or thicken borders, the rows of nodes have spaces between them and the borders get thicker within the nodes, but I cannot get a space between the two columns of nodes.)

I've tried quite a few CSS tricks but I can't get the nodes to separate. What else could I try?

 

[WildcatMedia]

I did try the column-gap: property (which works with flex) but all that did was change the display back to a single column of nodes. There may need to be more tweaks to get this to work.

row-gap: does work, however. It may have something to do with the wrapping, since if I change flex-wrap: to nowrap, I get four columns across and the column gap works.

 

[Pixeldust]

I came to ask the exact same question, except for the Bolt theme. Subscribing to this topic to be notified when an answer is posted.

 

[WildcatMedia]

I came to ask the exact same question, except for the Bolt theme. Subscribing to this topic to be notified when an answer is posted.

I have a Bolt license and checked it this morning--same result.

Normally it wouldn't bother me but I'm working on a holiday-themed variation and I have a subtle image background that shows above and below the nodes, but not between.

For now I've set the border color to the same as the background image so it looks to be invisible. (That's how I dealt with it in solid colors--I changed the left and right margins for the nodes to -3px and used a 3px border set to the background color behind the nodes to create "fake" spacing between the nodes, but it was a clumsy hack.)

I had a "Nodes" add-on left over from my theme fiasco (from another vendor) but I don't care to rely on it, and it also had styling quirks I couldn't get around.

 

[Russ]

Sorry for the late reply.

I should probably redo my code on this dual column. I prefer grid more instead of the flexbox approach.

Try this out in extra.less:

.block--category .block-body.nodedual
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: @xf-paddingSmall;
    margin-top: @xf-paddingSmall;
    @media (max-width: @xf-responsiveWide)
    {
        grid-template-columns: 1fr;
    }
    .node
    {
min-width: 0;
        margin: 0;
    }
    .node:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

}

Should be a bit more consistent (still need to have dual column enabled).

The "gap" line is the space between each of the nodes (vertical and horizontal)

 

[Pixeldust]

Thank you, Russ! This worked for me.

 

[WildcatMedia]

It almost works!

On Flat Awesome+ it does give me the improved spacing, but I ended up getting three columns, the furthest right bleeding over into the sidebar if I make the window narrower. But, I'll have to dig through my other modifications and add-ons to see what's causing it. (My only add-on affecting nodes is one that lets me change node icons.) It also does this on a clean copy of the master Flat Awesome+ style. I'll give it a try on my test site when I get a chance (I'm busy until next week).

BTW, I'm still on 2.2 on the FA+ site, so that might have something to do with it also. My test site has 2.3 though (prepping for the upgrade).

On the Bolt test site, it's working perfectly. It's also on 2.3.

 

[Russ]

Looks like the original CSS was causing some overflow from long last post thread names potentially.

I added "min-width: 0;" which is a weird fix for the .node level but it seems to work.