Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 12, 2021 at 11:55 am #1271841
    Silvi33

    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

    January 13, 2021 at 7:31 am #1272048
    Rikard

    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

    January 13, 2021 at 11:02 am #1272106
    Silvi33

    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

    January 15, 2021 at 4:15 am #1272569
    Rikard

    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

    January 18, 2021 at 5:16 pm #1273383
    Silvi33

    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”

    January 20, 2021 at 3:31 am #1273867
    Ismael

    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

    January 20, 2021 at 4:43 pm #1274110
    Silvi33

    Hello Ismael,
    It works perfectly.

    Thank you so much
    Best regards
    Sylvie

    January 21, 2021 at 11:16 pm #1274541
    Ismael

    Hi,

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

    Have a nice day.

    Best regards,
    Ismael

    May 27, 2021 at 9:56 pm #1302718
    atomcc

    Hi, I can start a new thread but I have followed your directions on how to make a border around two columns, but on mobile, since one column is pushed under the other, the borders just sort of not end (because I have hidden the center border).

    How can I make the border disappear under mobile. Also, I used some CSS to make sure the text and background is centered in the column and under mobile, they overlap.

    Any chance you could help?

    Thanks,
    Jeff

    .left_column_with_border {
    display: table;
    border-right: 0 !important;
    padding: 20px;

    background-color:#f1f1f1; border-radius: 16px;

    width:400px;
    height:502px;
    }

    .right_column_with_border {
    border-left: 0 !important;
    border-radius: 16px;
    }
    .avia-image-container-inner, .avia_image, .av-image-caption-overlay {
    border-radius: 16px !important;
    }

    • This reply was modified 3 years, 5 months ago by atomcc.
    May 28, 2021 at 1:56 pm #1302833
    Ismael

    Hi,


    @atomcc    : Try to wrap the css code inside a css media query so that the changes only apply to desktop view.

    @media only screen and (min-width: 768px) {
  /* Move css code here */

}

    If you need further assistance, please feel free to open a new thread. We will close this one for now.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Two columns with borders around the full block’ is closed to new replies.