Navigation
Archive / Adding boxes
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • October 29, 2016 at 7:35 am #1235828
    yhshin1020
    Participant

    Hey,

    I want to add coloured boxes (something like the picture below) around each of the column, separated by a small gap, on my website.

    Could you help me out?

    Thank you.

    October 29, 2016 at 7:37 am #1235831
    yhshin1020
    Participant
    This reply has been marked as private.
    October 29, 2016 at 8:54 am #1235866
    Thai
    Moderator

    Hi There,

    Please add the following CSS under Customizer > Custom > Global CSS:

    .page-id-26 #x-content-band-2 .x-column {
    border: 4px solid #f0f0f0 !important;
}
@media (min-width: 768px){
    .page-id-26 #x-content-band-2 .x-column {
        border: 4px solid #f0f0f0 !important;
        margin: 0 15px !important;
        float: left;
        width: calc( 33.33333% - 30px );
    }
    .page-id-26 #x-content-band-2 .x-column:last-child {
        margin-right: 0 !important;
    }
}
@media (max-width: 767px){
    .page-id-26 #x-content-band-2 .x-column {
        margin-bottom: 15px;
    }
    .page-id-26 #x-content-band-2 .x-column:last-child {
        margin-bottom: 0;
    }
}

    http://i.imgur.com/Ow0yrDc.png

    Hope it helps 🙂

    October 30, 2016 at 6:01 am #1236550
    yhshin1020
    Participant
    This reply has been marked as private.
    October 30, 2016 at 6:05 am #1236554
    Thai
    Moderator

    If you need anything else please let us know.

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1235828 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>