- This topic has 7 replies, 2 voices, and was last updated 3 years, 5 months ago by David.
-
AuthorPosts
-
October 16, 2020 at 6:22 am #1491856Caroline
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!
CarolineOctober 16, 2020 at 6:58 am #1491904DavidStaffCustomer SupportHi there,
can you share a link to your site so i can play with some CSS?
October 16, 2020 at 7:12 am #1491939CarolineSure – I’ve shared it in the private info box π
October 16, 2020 at 8:26 am #1492146DavidStaffCustomer SupportTry 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; } }
October 16, 2020 at 8:36 am #1492162CarolineWow – 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!
October 16, 2020 at 8:46 am #1492179DavidStaffCustomer SupportAwesome π
Some info on complex nth-child selectors:
And then the before Pseudo elements to which the border is applied:
October 16, 2020 at 8:55 am #1492200CarolineThank 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 ππ
October 16, 2020 at 9:02 am #1492211DavidStaffCustomer SupportYou’re welcome π
-
AuthorPosts
- You must be logged in to reply to this topic.