Okay
  Public Ticket #2199496
Column borders
Closed

Comments

  • samwell7814690 started the conversation
    October 29, 2019 at 9:12pm

    Hi,

    This is in reference to another thread  https://themenectar.ticksy.com/ticket/225781 where I am looking for a CSS solution to add a keyline column seperator between columns.

    (1) The below solution works but it makes 2 of the columns disappear for mobile and tablet. Is there a fix for this at all please? You can view the link ive shared to see the issue

    /* vertical line between columns desktop only*/
      .column-divider {
            border-right: 1px solid #d6d6d6;
        }
        
    @media only screen and (max-width: 1000px) {
        .column-divider {
            display: none !important;
        }
    }


    (2) Lastly, what is the easiest way to then have horizontal dividers/seperators when the layout is viewed on mobile and tablet?


    Thanks

    Damien


  •  8,992
    Tahir replied
    October 30, 2019 at 2:55pm

    Hey,

    Please provide the page url so that i can write up the custom css for whats possible.

    Thanks

    ThemeNectar Support Team 

  •  8,992
    Tahir replied
    October 30, 2019 at 3:40pm

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    #footer-outer .col.span_6:last-child {
    border-left: 1px solid rgb(95, 99, 101) !important;
}

    Thanks

    ThemeNectar Support Team 

  • samwell7814690 replied
    October 30, 2019 at 3:43pm

    Hi Tahir,


    This code adds a column border for the footer. 

    This task related to adding a border to the right of a column which has been successfully achieved but the border still shows up on mobile and tablet which is an error, and thats what Im looking for CSS to fix because the ;last provided CSS caused the columns to disappear when the following code was added.

    @media only screen and (max-width: 1000px) {
        .column-divider {
            display: none !important;
        }
    }


    Thanks

  •  8,992
    Tahir replied
    October 30, 2019 at 3:46pm

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    @media only screen and (max-width: 1000px) {
    .column-divider {
        border: none !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  • samwell7814690 replied
    October 30, 2019 at 3:48pm

    perfect, thankyou for your help