vertical separators between columns in Customizr

andrew55
(@andrew55)

8 years, 2 months ago

Maybe I’m asking this in the wrong place, but I was hoping someone here might have a solution.

In Customizr, I have a row of three bootstrap columns set up and am attempting to get vertical border lines (separators) between column 1 and 2, and between 2 and 3.

I’ve been searching and trying various solutions for days. With the css options I’ve tried:

1. either the border line isn’t centered correctly
2. the whole row is shortened and not centered
4. the text and images in one of the boxes doesn’t size the same as the other boxes.

Here is a link to test page site:

http://healthyhouseclub.com/test-page/

After header, you will see the three boxes. There are border lines on the site now, but you will see they aren’t centered correctly between the boxes.

Thanks for any suggestions how to do this correctly.

Viewing 5 replies - 1 through 5 (of 5 total)

rdellconsulting
(@rdellconsulting)

8 years, 2 months ago

I’ve never tried this, but css-tricks is one of the best sites around so I bet it works! Let me know…

Thread Starter andrew55
(@andrew55)

8 years, 2 months ago

rdellconsulting – I’ve seen css tricks before, but not that tutorial. I will definitely check it out. Thank you very much.

I was also looking into flexbox, that hopefully won’t be needed.

Thread Starter andrew55
(@andrew55)

8 years, 2 months ago

If you look at their html, it looks like each column is a paragraph. So, this seems to create issues if you want to have h1, h2, or a nested div inside of column. Bummer. I guess maybe I could use a span inside of paragraph to create my own hacked h1, h2, etc?
rdellconsulting
(@rdellconsulting)

8 years, 2 months ago
I’ve just tried on my test site using the 3 x FP images and this seems to work:
```
.span4.fp-two {
    margin: 0% 1%;
    border-left: 2px solid black;
    border-right: 2px solid black;
}
```
Thread Starter andrew55
(@andrew55)

8 years, 2 months ago

rdellconsulting – with some css tweaking, I was actually able to get your suggested method working properly.

I was able to get div containers withing the columns, which was a necessity for me. You can see what I was able to accomplish on the test page I mentioned earlier, if you like.

I had a strange issue come up with the flickering when hovering over the images, which worked fine before. The first image hover effect works great, but the images in columns 2 and 3 are flicking. This isn’t related to Customizr, so I will look elsewhere for the solution to this.

Thanks again. Hopefully someone else will benefit from this when trying to accomplish something similar. Although I’m not great coder, regular bootstrap columns, flex-box and the other methods I’ve tried only accomplished great frustration for me. I’m going to keep testing this, but it appears to be a great solution.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘vertical separators between columns in Customizr’ is closed to new replies.