Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1271841

    Hi there,
    I would like to create a section of two columns with borders around the section. In addition, I would like to have a right bar on this page only.

    I have tried to add a color section, but the borders won’t work.
    I have tried the grid row, but there is no border around the grid and the right bar is not showing.

    I really don’t know how to do. This template seems to be so complicated to do a simple thing, could you please help me ?
    Thanks
    Best regards
    Sylvie

    #1272048

    Hi Sylvie,

    Did you try 1/2 elements? You can then add classes to them in the element options, and use CSS like this in Quick CSS:

    .your-border-class {
      border: 1px solid red;
    }

    Best regards,
    Rikard

    #1272106

    Hi Rikard,
    Thank you for your reply.
    I have added the css code in Customising Additionnal CSS, is it the right place, because it’s not working.
    Also, I am not sure it will work because I would to have the borders around the full block of two elements, not around each element.
    Not sure I am clear, sorry.
    Please let me know if I can share a screenshot.

    Thanks in advance.
    Best regards
    Sylvie

    #1272569

    Hi Sylvie,

    Thanks for the update. Could you post a link to where you want to add this please? You can upload screenshots to a service like Google Drive or Dropbox, then link to it here.

    Best regards,
    Rikard

    #1273383

    Hi Rikard,

    I would like to add it here. I have posted a screen shot of how I would like it to be.

    Thanks for your help.

    Best regards
    Sylvi”

    #1273867

    Hi,

    Thank you for the info.

    This is possible but we have to apply unique class names to the first and second column, and add a few css modifications. Please edit the page and the first column in the row. In Row Settings > Row Layout, make sure that the Equal Height option is enabled, and that there are no space between the columns. After that, enable the borders in the Styling > Borders > Border for both columns.

    Again, edit the first column in the row, go to the Advanced > Developer Settings toggle, and apply the class name left_column_with_border in the Custom CSS Class field. Do the same steps for the second column, but use the class name right_column_with_border instead. You can now add the following css code in the Quick CSS field to remove the middle borders that separates the columns.

    .left_column_with_border {
    	border-right: 0 !important;
    }
    
    .right_column_with_border {
    	border-left: 0 !important;
    }
    

    Best regards,
    Ismael

    #1274110

    Hello Ismael,
    It works perfectly.

    Thank you so much
    Best regards
    Sylvie

    #1274541

    Hi,

    Glad it worked. Please feel free to open a new thread if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

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

You must be logged in to reply to this topic.