How to make box semi transparent and full-width

How can I make the box overlapping the slider semi transparent and full width as shown in this shot;



  • Tyler Postle

    Hey Barni,

    Hope you're doing well today!

    This one is a little difficult to make full width because it's inside the same container as the rest of the content. So in order to make it full width you need to make all of the content full width.

    What I did here, was make it all full width, but then add in padding for everything except the 1 element with boxes that you want to be full width. I've added some transparency to it too.

    Just add this CSS to your custom CSS sheet:

    .home_box_container_list.clearfix {
      opacity: 0.9;
    .home_box_container.clearfix.animated_element.animation-fadeIn.duration-500.fadeIn {
      width: 33.94%;
    .home .vc_row.wpb_row.vc_row-fluid.page_margin_top {
      padding: 5px 50px;
    .home .theme_page {
      width: 1090px;
    .home .slider_content {
      padding-left: 30px;

    All of these changes should only be applied to your home page as I didn't want to change the width of the content across your whole site.

    If you want it to be more transparent then just adjust the 0.9 value :slight_smile:

    I believe you have a custom CSS sheet already but just in-case, this plugin is a good alternative if you don't:

    Hope that helps!

    All the best,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.