Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #643497

    Well, the customer asked me to draw a thin vertical line between the “1/4” on the left (with a widget area inside, a menu) and the “3/4” on the right (with a text block and the content of the page). This is the test page: and there are several others similar (team, network, services, products, etc).
    I found I can draw the full border around the element, even with rounded corners, but this is not what I need.
    Any help is appreciated, thank you.


    Hi Giovanni,

    Please try the following in Quick CSS under Enfold–>General Styling:

    .page-id-203 .av_one_fourth {
    border-right: 1px solid grey;

    if you want the same results on other page then inspect the page in question and find the page id class in the body tag and add the same CSS as above but with the updated page id class.

    Best regards,


    well, it works, thank you Rikard, but since the 1/4 is shorter than the 3/4 I have a too-short vertical line.
    My idea, based on your suggestion, is to remove the right border from 1/4 and add a left border to 3/4

    .page-id-203 .av_three_fourth {
    border-left: 1px solid grey;

    it works as well, but the line is attached to the text-block and is not a nice thing to see

    please, how can I add some room between the border and the text-block? I suppose I should pad something…
    i,e, padding: 5px; /*and it works :)

    Addendum: can I set this left (or right) border as “standard” for the whole site instead of adding stuff to the CSS for each page? can I remove the .page-id-xxx ? Yes, I can.

    • This reply was modified 3 years, 11 months ago by  luratidante.


    Add a left padding to the 3/4 column. Something like this:

    .av_three_fourth {
        padding-left: 50px;

    Turn on the custom css class so that you can specify unique selectors for the elements:

    Best regards,

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.