Column separated by a vertical line?

Classic
1

I have a page with two columns and single column areas. I would like to be able to have a vertical line between the two columns to separate them. Is this possible using styles or similar? The page is over 3500 lines of code so would hate to have to go through every column stack to edit it!! TIA

2

Assuming you use stacks, you can set some CSS for the left and right column. Check the source code for the correct class, but I think it’s s3_column_left and s3_column_right:

.s3_column_left { border-right: 1px solid blue; }

Screenshot 2020-11-02 at 12.25.42
Screenshot 2020-11-02 at 12.25.421246×290 70.8 KB

3

Thanks drizzle. I changed the s3 part to .historyclass and I get the blue line down the right of the two columns, but I do not get it between the columns where there are two columns. I have experimented and can get the blue line on all sides of the one column!
The page is a trial at the moment at https://glio.me.uk/Trial/page-15/. For the date 5-Apr-1802 I want there to be a vertical line between the 5th & 6th April

4

Don’t you just love autocorrect! I did type dripple

5

Hi Geoff,

It looks like you are using Foundation 6 correct?

It also looks like you have your stacks option not to show stacks meta tags or Comments in HTML Correct?

2020-11-02_10-16-19

That makes it harder for people to help you out.

Anyway it looks like you are using a simple Foundation 2 coulum stack for the area you want the divider for correct?

If you change it to a Columns Pro stack, you can add a Column Divider easily. It’s a built-in feature.

2020-11-02_10-20-38
2020-11-02_10-20-38692×721 89.9 KB

Joe explains it hear:

You can do it with CSS, but you will have to take into account Small screen sizes where the columns stack.

If it’s too much work to convert the text to columns Pro then post back and I can give you some CSS.

6

Thank you Doug. I have an awful lot of work to go back over what I have done with ordinary columns! Columns Pro certainly does exactly what I want, I just wish I had asked the question earlier. :grin: I did look at Columns Pro at one point, but it looked a bit complicated, so I used the simple columns.
Columns Pro confused me at first because the columns appeared to be rows until you previewed the page. My page from 1800 onwards now has the vertical lines. Thanks again

7

If you want the divider on every column you have you can add something like this:

@media print, screen and (min-width: 40em) {

   .grid-x > div {
      border-right: 1px solid darkblue;
   }
   .grid-x > div:last-of-type {
    border-right: none;
   }

}

That should prevent the border on small screens and add it for every column.

You can of course change the color and size.

1 Like
8

Is it possible that Text Columns does the trick?
Just guessing

9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.