Useful Divi CSS snippets for every project

In this post, I will share all my useful Divi CSS snippets, that I use in most of my projects. I will add more over time.

Reverse stacking order on mobile

Add dv-reverse-columns class to row. It also automatically adds margin to the second element.

@media (max-width:980px) {
   .dv-reverse-columns {
      display: flex;
      flex-direction: column-reverse;
   }
    .dv-reverse-columns.et_pb_column:first-child {
       margin-top: 50px;
    }
}

Buttons next to each other

If you want to get two buttons next to each other, instead of above you have to add the dv-inline-buttons class to row and this CSS snippet to your page.

.dv-inline-buttons .et_pb_button_module_wrapper {
   display: inline-block;
   float: left;
}

Overlay over parallax background

Unfortunately it’s not possible to have a parallax background and a overlay in Divi. But luckily there is a fix for it. Just add the dv-overlay class to your parallax section.

.dv-overlay .et_parallax_bg::before, 
.dv-overlay.et_pb_with_background::before { 
   background-color: rgba(0,0,255,0.7); /* color of the overlay, this color is blue with 0,7 opacity */
   content: ""; 
   height: 100%;
   width: 100%;
   position: absolute; 
   left: 0;
   top: 0; 
}

Hide first letter of date at countdown

How to hide the first letter of countdown data? Just add .dv-date-2-digits to the module and add this CSS.

.dv-date-2-digits.et_pb_countdown_timer .section.days p.value:first-letter {
   color: transparent;
   font-size: 0px;
   vertical-align: top;
}