Bottom Widget – remove border above

  • Ripple Web Design

    (@ripple-web-design)


    7 years, 8 months ago

    I have managed to remove the black line above the widgets with this css:

    .widget {
    border-top: none;
    }

    However, I only want to remove the line above the bottom widgets. I have tried a few things but nothing works.

    Either that or I would like to make one bottom widget full-width (and responsive). It is possible that I could accomplish this by making a border at the bottom of the page content but I have not looked into that option yet.
    Any suggestions? http://hortusdesign.ca/

Viewing 1 replies (of 1 total)
  • David C.

    (@dcoleonline)

    7 years, 8 months ago

    Hi there,

    You can hide the border above the widgets in Bottom Content 1 and Bottom Content 2 by adding this CSS to your site:

    /*Remove Top Border for Twenty Sixteen Bottom Widgets*/

.content-bottom-widgets .widget {
    border-top: none;
}

    To make the first bottom widget area full width, you’ll need to use the following bits of code.

    This hides the Content Bottom 2 widget area:

    /*Hide Content Bottom 2 Widget Area*/

.content-bottom-widgets .widget-area:nth-of-type(2) {
    display: none;
}

    This allows the Bottom Content 1 widget area take up the space that was reserved for Bottom Content 2:

    /*Make Content Bottom 1 Widget Area Full Width*/

.content-bottom-widgets .widget-area:first-of-type {
    width: 100% !important;
}
Viewing 1 replies (of 1 total)
  • The topic ‘Bottom Widget – remove border above’ is closed to new replies.