How to add line spacing between items in DIVI lists

, , ,

Have you ever wanted to add line spacing between items in a bulleted or numbered list using the DIVI theme or plugin but not been able to achieve this and just simply created separate bulleted or numbered lists for each item?   If so then, this post is for you as we will show you simple way to add line spacing to your divi lists.

The css code you need is as follows:

#et-boc .et-l ol li, #et-boc .et-l ul li {
padding-bottom: 20px;
}

You can change to ’20’ to whatever value you want depending on how big you want the gap between each line to be.

11 thoughts on “How to add line spacing between items in DIVI lists”

  1. Hi there,
    Thanks for this! I do have a bit more basic of a question though: where do we add that CSS code? I went to the module’s advanced text settings under “custom CSS,” but when I added that into the Before, Main Element, and After boxes, nothing happened.
    Thank you!

    Reply
    • Hi,

      I am glad you have found this post useful.

      In terms of adding the css code, this needs to be added into the additional css section within your theme. If you go into the admin area of wordpress and click on Apperance, then Customize and then Additional CSS and then paste the code in there and save it and it should work.

      Let me know if you have any issues.

      Thanks

      Lucy

      Reply
  2. Unfortunately, it didn’t work for me.

    I have another issue with coding that may be related to why this code doesn’t work in Divi’s Theme Customizer: There have been many people working on our company’s website. I have now been given the job of learning what I can and cleaning things up.

    Someone had gone into the coding and put the common “!important” all over the place… I am just starting to learn HTML & CSS. Can you help me with this issue?

    I appreciate any help I can get! Thank you.

    Respectfully,

    Laurie

    Reply
    • Hi Laurie,

      Try adding the following:

      /* changing line spacing in lists */
      .entry-content li{
      padding-bottom: 20px !important;
      }

      You can change the 20 to whatever value you want it to be.

      Hope this helps.

      Lucy

      Reply
      • Hi Lucy

        That code is a Life Saver:

        /* changing line spacing in lists */
        .entry-content li{
        padding-bottom: 20px !important;
        }

        Thank you for your Help, it works very well for Divi & WordPress.

        Have a Great Day.

        Rafik

        Reply

Leave a comment

Why not discuss your project with us?