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

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

Home Forums Support Vertical separator between posts on blog posts page

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

    #1491904
    David
    Staff
    Customer Support

    Hi there,

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

    #1491939
    Caroline

    Sure – I’ve shared it in the private info box πŸ™‚

    #1492146
    David
    Staff
    Customer Support

    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;
        }
    }
    #1492162
    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!

    #1492179
    David
    Staff
    Customer Support

    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

    #1492200
    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 πŸ™‚πŸ™

    #1492211
    David
    Staff
    Customer Support

    You’re welcome πŸ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.