Okay
  Public Ticket #225781
Create border around columns
Closed

Comments

  • Evan started the conversation
    June 4, 2014 at 1:31am

    I have 3 white columns on the homepage and I am trying to add a thin black border around each box. Any ideas?

  •  9,548
    Tahir replied
    June 5, 2014 at 3:06pm

    Hey Evan!

    You will have to add a extra class to each column such as "border-column" and add this into the Custom CSS box located in your Salient Options panel :

    .border-column {
    border-left: 3px solid #000;
}

    Cheers

     Salient Support Team

  • Evan replied
    June 5, 2014 at 9:40pm

    Thank you so much!

  • Aaron replied
    September 25, 2014 at 1:59am

    Hey Tahir,

    What if I wanted the border to only show up on desktop and not mobile devices?

  •  9,548
    Tahir replied
    September 25, 2014 at 3:17pm

    Hey Aaron!

    You will have to wrap it in a media query. Like this:

    @media only screen and (max-width: 480px) {
    .border-column {
        border-left: 3px solid #000;
    }
}

    Thanks

     Salient Support Team

  • Aaron replied
    September 25, 2014 at 6:55pm

    Thank you!

  • samwell7814690 replied
    October 29, 2019 at 4:55pm

    Hi Tahir,

    I was looking for this solution too and have successfully implemented it although the following code does not exclude it from tablet and phones? I tried the code you used below and it just removed it from desktop and it remains on tablet and phone?

    Is there a way of having just horizontal seperators once it switches to phone breakpoint?

    An example page can be seen here https://gateonedev1.staging.wpengine.com/retail-rework/

    Thanks
    Damien

    /* vertical line between columns desktop only*/
  .column-divider {
        border-right: 1px solid #d6d6d6;
    }
    
    @media only screen and (max-width: 480px) {
    .column-divider {
        display: none;
    }
}
  •  9,548
    Tahir replied
    October 29, 2019 at 7:43pm

    @samwell,

    IF you want to remove it from tablet and phone as well use below css: 

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

    Best

     Salient Support Team

  • samwell7814690 replied
    October 29, 2019 at 7:48pm

    Hi,


    Thanks, that kind of works but actually hides the entire column on mobile and tablet and not just the divider

  •  9,548
    Tahir replied
    October 29, 2019 at 7:53pm

    Could you create a new ticket and provide the page url so we can write up the css for exactly what you need. 

    Thanks 

     Salient Support Team