[TrutravelsParticipant]

Hi there

I would like to try an make some form of vertical divider.

Here is a PSD mockup of what I want to try to achieve:

I want to make those lines separating the 1/3 column.

Anyone got some ideas on how to achieve this?

[TrutravelsParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add the following CSS code under Customize -> Custom -> CSS:

.x-column.vc.two-thirds {
border-right: 1px solid red;
padding-right: 30px;
}
.x-column.vc.one-third {
border-right: 1px solid red;
padding-right: 34px;
}

You may need to add twos with 2/3 + 1/3 layout to have separated borders.

Hope it helps.

[TrutravelsParticipant]

Once again, thanks for the awesome support.

I am learning so much from these tips.

How did you work out how much padding must be added?

[ChristopherModerator]

Hi there,

Glad we could help you.
You can use developer tools in chrome or firebug in firefox browser to inspect elements and try properties with different values to get the best result.

Thank you.

[Author]

Posts