Divi is a great theme and easy to use. However, It has some lack features that I don’t like to work on such as vertical-align content, a reverse column in mobile devices, or change color of list point… etc.  The good news is you can fix it with simple CSS. This article will share with you all these CSS that I use to work on Divi.

Watch Tutorial Video

Vertical Align Content Column

This CSS code will help you center the content column in the same row. If you want to know why it works or another method to make vertical content, you can visit Divisoup’s Post to learn more. Here is my way and how I do it.

Step 1:  Go to Divi > Theme Options Custom CSS and add this CSS below.

CSS

Step 2: Open row setting > Design > Enable “Equalize Column Heights“

Equalize Column Heights

Step 3: For each column inside the row go to Advanced > add “vertical-align” in the CSS Class.

Add CSS

Reverse Column on Mobile view

This CSS code will help you reverse the order column in the Mobile view or tablet view as you want. So we will use a media query CSS to make it, also in this tutorial I use the default breakpoint from desktop to tablet of Divi is 980px. It means the column will re-order in tablet and mobile view.

Step 1:  Go to Divi > Theme Options Custom CSS and add this CSS below.

CSS

Step 2:  Open Row Setting > advanced > then add “reverse” in the CSS Class.

Add CSS

Change Color listing point

When you use the bullet list or number list in the text module, you know that Divi doesn’t have the option to change the color of the bullet point or number list to different text color.

Bullet Listing

  • Bullet 1
  • Bullet 2
  • Bullet 3

If you want to change color only bullet, simply go to the text and add CSS id class to <ul id=”listcolor”> of listing like the picture below.

Bullet List

After you add id to <ul> like the picture above, the next step is to copy the code and add it to the custom CSS.

CSS

Here is a result

  • Bullet 1
  • Bullet 2
  • Bullet 3

Number Listing

  1. Number 1
  2. Number 2
  3. Number 3

If you want to change color only number list, simply go to the text and add CSS  id class  <ol id=”listcolor”> then use similar CSS code like Bullet above. You can name id like whatever you want but it has to match with CSS code.

Here is a result change number list color

  1. Number 1
  2. Number 2
  3. Number 3

Full width button

Right now, Divi doesn’t allow to make a full-width button. However, it is very easy to make a full-width button with CSS.

Step 1:  Go to button > Advanced > add CSS class “fullwidth“.

full width button

Step 2: Add the following CSS to your Divi theme  Custom CSS. 

CSS

That’s it

I hope this tutorial will help you with a faster working process when working with Divi. Let me know what are you thinking, do you think those codes are useful? Commend below your thinking.