Hello- This must be simple and I’m just totally brain dead today, but here goes:
How do I create vertical divider/separation lines between columns in stacks (or using an additional stack)?
If I create a border in stacks, it tends to be off center between the stack next to it. Example: I add a 3 column stack, put a right line on the left column. It “leans” more towards the left content. Hope this makes sense. All the additional stacks I found are horizontal lines.
Using latest RW 7 with latest mac os and latest stacks.
Did you try adding padding?
Hey Lisa- Thanks for the attention. If I create padding, it still makes the line off-center… it will favor the stack container that I’ve created the line within.
I could keep adding padding to create the optical illusion of centered, but then the text container will look a lot more narrow than the other containers.
Any other thoughts?
Sorry, I don’t know of a vertical line stack either Maybe if you post a link or screenshot someone else can answer it.
Are you using normal Stacks column stacks, or 3rd party?
Quick demo of using stack borders to make vertical dividers:
Hi Isaiah- Hope you’re well and thanks for taking the time to create the demo.
What you have shown is what I’ve done, but maybe its just leftover from my years at Apple, but the lines aren’t centered. There are less pixels with the container in which I create the border.
I’m just using the standard 3 column stack. Here’s a picture of how close I’ve gotten it…
If you look closely at the line separation on the left (left of the middle), you’ll see that the line is closer to the text container on the left column. The right separation line is closer to the right text container column. The result is that the center text container is larger (hope this makes sense).
I know, I know, you’re all probably rolling your eyes at me. Sorry! Can’t help it. If this is it, than that’s fine… I don’t want to drag everyone with me down a rat hole.
Thanks for the attention.
OK, here is a very much much too long discussion on vertical lines.
This uses 2-columns. And yes it will be substantially different with three columns. The exact same methods can be used on 3-columns, but of course the math gets a bit more difficult.
But the basic rules are:
- add a border to an edge of your longest content
- reduce the “gutter” setting to zero
- create your own gutter by adding padding where it’s needed.
- optional: make a partial to make reusing your creation easy!
The Gutenberg stack by RWExtras.com might also be useful to use for borders between responsive columns of text:
There is a free demo version to try and RapidWeaver Ninja recently gave the updated version a very positive review:
Thanks Will and Isaiah for the time. Gutenberg looks like it would work great. I never mind investing money in effective stacks. I’ll give it a drive and report back.
Ok… Gutenberg did it. Thanks @willwood.
Also, I went back re-read @isaiah comment about “very much much too long discussion on vertical lines” - I cracked up out loud. Thought this would only be 1 response and never expected it to get the attention of Will and Isaiah. Thank you both.
Thanks for that. I’ve been doing it old school with boarders and padding etc - here https://life360counselling.com/counselling-support-links-Barrie/
I will definitely download the Gutenburg stack! Much more polished.