[Support request] Vertical separator between posts on blog posts page

[Caroline]

Hi – I’d like to add a vertical separator between blog posts on my blog page – something like the top picture on this page https://www.notion.so/Vertical-Separators-21cf33d2f90849aaa672ffd061779c5a

At the moment, my page looks like this at full screen (second image here https://www.notion.so/Vertical-Separators-21cf33d2f90849aaa672ffd061779c5a).

And after the first breakpoint, there are just two columns on the page, like the third image here: https://www.notion.so/Vertical-Separators-21cf33d2f90849aaa672ffd061779c5a

I’ve tried various things using borders but I’m not having any luck, and wondered if you might have any suggestions. It’s tricky (at least for me!) because the default padding is only to the left side of each post, and because presumably I’d want to not target the last post in each row (and I’m not sure how to achieve this).

Any help would be very much appreciated!
Caroline

[David]

Hi there,

can you share a link to your site so i can play with some CSS?

[Caroline]

Sure – I’ve shared it in the private info box 🙂

[David]

Try this CSS:

.generate-columns-container>article {
    position: relative;
}
/* Medium screen 2 columns */
@media(min-width: 769px) and (max-width: 1024px) {
    .generate-columns-container>article:nth-child(2n) .inside-article:before {
        content: '';
        position: absolute;
        top: 0;
        left: 10px; /* Half of separating space */
        bottom: 0;
        border-left: 1px solid #000;
    }
}
/* Large screen 3 columns */
@media(min-width: 1025px) {
    .generate-columns-container>article:nth-child(3n) .inside-article:before,
    .generate-columns-container>article:nth-child(3n-1) .inside-article:before {
        content: '';
        position: absolute;
        top: 0;
        left: 10px; /* Half of separating space */
        bottom: 0;
        border-left: 1px solid #000;
    }
}

[Caroline]

Wow – it works like magic – thank you so much!

Now to spend some time dissecting what you’ve done so I can brush up on my CSS knowledge!

[David]

Awesome 🙂

Some info on complex nth-child selectors:

http://nthmaster.com

And then the before Pseudo elements to which the border is applied:

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

[Caroline]

Thank you so much David! That’s really appreciated.

I’ve used ::before before, but I never would have thought to use it in this situation. Clever!

Both those pages have been bookmarked 🙂🙏

[David]

You’re welcome 🙂

[Author]

Posts