Increase Divi Text Module Bullet List Spacing and Indent

This post may contain referral links which may earn a commission for this site

Here's a simple CSS snippet I use to increase the indent and spacing around and between items in bullet lists in the Divi Theme text module:

.et_pb_text ul, .et_pb_text ol { margin: 30px; }
.et_pb_text li { margin-top: 16px; }

Hundreds of new features for Divi
in one easy-to-use plugin

27 Comments

  1. oh man, I'm loving it. Thx so much for all the good stuff you are putting out here, highly appreciated!

    Reply
    • You're welcome, Carsten!

      Reply
    • Thanks a million for this tip, looks much better!

      Hi, is there any way to justify the text next to a bullet point (so that it doesn't wrap around below a bullet point)? Basically when you have two lines next to a bullet point for example.

      Thank you.

      Reply
      • Hey Antony, you're very welcome! Any chance you're able to share a link to an example page showing the problem? I might be misunderstanding… I set up a test page with a text module, but when I add a multi-line bit of text to a bullet point, the start of each line of text is in line with the start of the first, to the right of (insead of below) the bullet point. Thanks!

        Reply
  2. Hi, I have a problem. Could you help me?

    I want to change the line-height of all text bodies of my page entries

    I use this code: .et_pb_text_2 p {
    line-height: 1.7em;
    }

    I put it in the divi css editor but it does not work, it does not change to 1.7

    I have tried with

    p {
    line-height: 1.7em;
    }

    but it does not work either.
    what I do

    Reply
    • Hey Sergio, I can see you're now using the "!important" directive on your page entries:

      .et_pb_text_2 p {
      line-height: 1.6em !important;
      }
      

      It looks to me like it is taking effect correct – am I right in thinking you've got it working now?

      Reply
  3. Hello,
    I am wondering if you have some similar code for the numbered lists, which don't even output how they look in the back end? Would you be so kind as to provide a set of code for the bullet lists and another for the numbered lists (I am trying to pull this off, but making something of a mess of it.) My website is still on a local host unfortunately.
    Many thanks,
    Alison

    Reply
    • Hey Ali, that code should style numbered lists too. Are you seeing no change at all? If not, are you using a text module? And how are you adding the CSS?

      Reply
  4. Great! This solved my problem – THANK YOU!

    Reply
  5. I'm having issues with this. I have entered this into the CSS in my text module, but nothing is happening. I did a Google search and tried applying another code into the CSS of the child theme I am using, but again, nothing. It looks horrible in the article I am trying to write, and it's kind of frustrating that a simple indentation in a text editor would require novices to know how to use CSS.

    Not sure what else to do. :/

    Reply
    • Hi Jessie, yeah, I fully understand your frustration. Unfortunately there's no built in way to do it in Divi at the moment. You can't add this CSS in the text module's custom CSS tab, unfortunately. I won't bother you with the details, but if you ever to decide you want to learn CSS let me know and I'll happily explain why!

      The solution is to put the CSS from this post into Divi's custom CSS box, which you can find from the WordPress dashboard by going to: Divi > Theme Options > General > Custom CSS

      Just paste the code in there after anything else already in there and it should work. Let me know if it still doesn't work after that.

      P.S. If it helps, this post has a bit more info about adding CSS to Divi.

      Reply
      • Hello,

        Unfortunately that doesn't seem to work either. I actually DO know CSS now (among other things like JavaScript), but nothing I am doing is working. I have tried editing the list items in Dev Tools, and it works, but when I try to apply those to Divi's CSS box where you said, it doesn't work. I also tried the code here and it doesn't work. The list looks so bad in the article. I can't stand it, and it's taken me 4 months to publish simply because of THIS issue. Not sure why I can't make that custom.

        This is one of the reasons I decided to learn to code and why I am beginning to hate themes…

        Reply
        • Hi Jessie, sorry to hear you've been having trouble with this. I've just checked and the CSS is still working for me when added via the "Divi > Theme Options > General > Custom CSS" box. Is there any chance you're able to send me a link to a page on your site showing a text module with the list so that I can see how you have it set up (either you actual article, or just a sample page)? Thanks!

          Reply
  6. Hi, I'm aiming to increase the line spacing in bulleted lists with text paragraphs (not the space between or after). Suggestions? Thanks much.

    Reply
    • Hi Katie, if I'm understanding you right, I think this will do the trick:

      .et_pb_text li { line-height: 2.2em !important; }
      

      If you want to target only some text modules, give the module a CSS class (e.g. "my-bullets") and use:

      .et_pb_text.my-bullets li { line-height: 2.2em !important; }

      Reply
      • Hi Dan — came back here looking for the same thing and haven't gotten the solution yet. I must be doing something wrong because I get red error codes when I put the above CSS in the text modules I'm targeting. I put the CSS class in the correct spot.

        Reply
      • Okay so I see you said to another commenter above that you can't add CSS to a text module? Going to see what happens with using the code in the overall CSS section with the CSS i.d. now…

        Reply
        • Great! Thanks for the updates, Katie, and I'm glad you got it working. And that's right, this code can't be added from within the text module itself (due to the way Divi's custom CSS feature works).

          Reply
      • Thank you so much Dan, for your Blog and this great little snippet! I works like a charm 🙂

        Reply
        • You're welcome, Mel 🙂

          Reply
  7. Hi, I use divi booster and increased the spacing between bulletpoints, but i would like it to be a little less spacing than Booster is using. Where can I change this? Pasting the .css in my childtheme doesn't work (tried that after turning booster text spacing off)
    thanks for your help!

    Reply
    • Hi saskia, there isn't currently an option in Divi Booster for controlling the amount of spacing in Divi Booster. Probably the best thing at the moment is to figure out why the css wasn't working in your child theme. Is there any chance you are able to send me one of the pages you're working on so that I can take a look? Thanks!

      Reply
  8. Oh, gosh — I'm looking for how to delete the space between a paragraph and the following list of bullets in Divi. Thanks!

    Reply
    • Hey, got it! Just use a minus sign, right?

      Reply
      • Hey Molly, yup, that should do the trick!

        Reply

Submit a Comment

Your email address will not be published. Required fields are marked *