How to style second last items in a list?

/in ,
Post Views: 7

Please use following CSS syntax to style the second last element in a list or group.

<style>
  .list-number-123 {
    list-style: none;
  }

  .list-number-123 li:nth-last-child(2) {
    background: #edeaea;
    color: #30a960;
    font-weight: 700;
    padding: 10px;
  }
</style>

<ul class="list-number-123">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ul>
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7

How to extend number of DIVI columns (more than 6)?

/in , ,
Post Views: 4

Step 01: Include the below CSS to theme options

/* Custom Columns */
.ten-columns .et_pb_module {width: 10%; float: left;}
.nine-columns .et_pb_module {width: 11.11%; float: left;}
.eight-columns .et_pb_module {width: 12.5%; float: left;}
.seven-columns .et_pb_module {width: 14.28%; float: left;}
.six-columns .et_pb_module {width: 16.66%; float: left;}
.five-columns .et_pb_module {width: 20%; float: left;}
.four-columns .et_pb_module {width: 25%; float: left;}
.three-columns .et_pb_module {width: 33.33%; float: left;}
.two-columns .et_pb_module {width: 50%; float: left;}

@media (max-width: 980px){
  .ten-columns .et_pb_module {width: 20%;}
  .nine-columns .et_pb_module {width: 33.3%;}
  .eight-columns .et_pb_module {width: 25%;}
  .seven-columns .et_pb_module {width: 33.33%;}
  .six-columns .et_pb_module {width: 33.3%;}
  .five-columns .et_pb_module {width: 33.3%;}
  .four-columns .et_pb_module {width: 50%;}
  .three-columns .et_pb_module {width: 33.33%;}
  .two-columns .et_pb_module {width: 50%;}
}
 
@media all and (max-width: 767px) {
  .ten-columns .et_pb_module {width: 25%;}
  .nine-columns .et_pb_module {width: 33.33%;}
  .eight-columns .et_pb_module {width: 25%;}
  .seven-columns .et_pb_module {width: 33.33%;}
  .six-columns .et_pb_module {width: 50%;}
  .five-columns .et_pb_module {width: 33.33%;}
  .four-columns .et_pb_module {width: 50%;}
  .three-columns .et_pb_module {width: 33.33%;}
  .two-columns .et_pb_module {width: 50%;}
}

@media only screen and (max-width: 479px) {
  .ten-columns .et_pb_module {width: 50%;}
  .nine-columns .et_pb_module {width: 50%;}
  .eight-columns .et_pb_module {width: 50%;}
  .seven-columns .et_pb_module {width: 50%;}
  .six-columns .et_pb_module {width: 50%;}
  .five-columns .et_pb_module {width: 50%;}
  .four-columns .et_pb_module {width: 100%;}
  .three-columns .et_pb_module {width: 100%;}
  .two-columns .et_pb_module {width: 50%;}
}

Step 02: Add the relevant class to your row, depending on the number of columns needed.

Step 03: Remember to only keep one column in the DIVI row settings and use DIVI modules as columns. That’s it Happy Coding!

How to center a div vertically and horizontally using CSS?

/in , ,
Post Views: 4
Centered DIV element

Please use following method to align any content vertically and horizontally centered..

<title>Vertical and horizontal center align div</title>
<style>
  .container-box {
    background: #efefef;
    max-width: 1080px;
    min-height: 500px;
  }

  .centered-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;     
  }

  .box {
    background: #ccc;
    text-align: center;
    padding: 50px;
  }
</style>
  <div class="container-box centered-div">
    <div class="box">
        This element is horizontally and vertically aligned to center!
    </div>
  </div>
Vertical and horizontal center align div
This element is horizontally and vertically aligned to center!