How to adjust the layout of lists in Divi to have all text equally indented

Apr 17, 2018 | CSS tweaks, Divi Theme, Lists

If you don’t want your list items to wrap around your bullet point for multiple lines, then here’s a CSS snippet for you and your Divi website. The following CSS will position your list icons outside of the list content:


/* Ul positioning */
.et_pb_text ul, .et_pb_text ol, .et_pb_tab ul, .et_pb_tab ol, .et_pb_toggle ul, .et_pb_toggle ol {
 list-style-position: outside;
}

 

You may also like to adjust the spacing between the list items and the line height:


.et_pb_text li, .et_pb_tab li, .et_pb_toggle li {
 margin-bottom: 6px !important;
 line-height: 1.4em;
}

 

Where to paste the CSS snippet

Navigate to Divi>Theme Options and at the bottom of the default “General” tab, paste the CSS snippet into the “Custom CSS” box and save changes.

 

Child Themes

We recommend using a child theme. It is your insurance against losing your custom work in updates. Click here for instructions on adding a basic Divi child theme with a stylesheet (for custom CSS). Click here to learn more about child themes and getting the most out of the Divi theme.

Want more module options for your Divi website?

Check out our Custom Modules for Divi
Browse Custom Modules