Why Don't Bullets Indent In Divi

7 min read Oct 02, 2024

Why Don't Bullets Indent in Divi?

If you're using the Divi theme and struggling with bullet points not indenting as expected, you're not alone. This can be a frustrating issue, especially if you're trying to create a visually appealing and organized list. Here's a breakdown of potential causes and solutions:

Understanding the Basics: How Bullets Work

Before diving into troubleshooting, it's helpful to understand how bullet points are created in HTML and CSS:

HTML Lists: Lists in HTML are defined using <ul> (unordered list) and <li> (list item) tags. The browser renders these tags by adding a bullet point in front of each list item.
CSS Styling: The appearance of the bullet points – their size, color, and indentation – is controlled by CSS properties like list-style-type and margin-left.

Common Causes for Indentation Issues

Divi's Default Styling: Divi's default CSS styles may override your custom settings. Divi aims for a clean and consistent look, and this can sometimes lead to conflicts.
Custom CSS Overriding: You might have added custom CSS rules that inadvertently affect bullet point indentation. This could be through a custom CSS file, Divi's Theme Builder, or inline styles within the content.
Browser-Specific Behaviors: While less common, different browsers might handle bullet point indentation slightly differently.

Troubleshooting Steps

1. Check for Conflicting Custom CSS:

Divi's Theme Builder: Navigate to Divi's Theme Builder, go to the relevant section (e.g., Header, Footer), and check if there are any custom CSS rules affecting list elements (ul, li).
Custom CSS Files: If you have added custom CSS to your website, open your style.css file (or any other custom CSS files) and search for rules related to ul, li, or list-style to identify potential overrides.
Inline Styles: Carefully examine your content. Inline styles (style="...") within your HTML code can also override default styling.

2. Reset Styling and Test:

Use a Divi Template: If the issue persists, start with a fresh Divi template or a blank section. This will help you isolate whether the problem is with your content or the Divi settings.
Disable Plugins: Sometimes plugins can interfere with styling. Temporarily deactivate any plugins you recently installed to see if that resolves the problem.
Disable Custom CSS: Temporarily disable any custom CSS styles to see if the bullet points indent correctly without them.

3. Manually Adjust Indentation:

If you've ruled out conflicting CSS, you can manually adjust the indentation using Divi's built-in styling options:

Select the List: Highlight the list elements within your content.
Divi's Visual Builder: In Divi's Visual Builder, you should see a styling panel.
Margins: Adjust the Margin Left value to increase or decrease the indentation of the bullet points.
Spacing: Experiment with Padding and Line Height settings to fine-tune the overall spacing around your bullet points.

4. Utilize Divi Modules:

Divi offers various modules that provide structured list layouts:

Blurb Module: The Blurb Module allows you to create visually appealing lists with images, text, and headings.
Accordion Module: The Accordion Module is ideal for creating interactive lists with expandable content.
Pricing Table Module: The Pricing Table Module offers a predefined layout for creating lists with different pricing options.

5. Consider Custom CSS:

If you need more precise control over the appearance of your bullet points, you can add custom CSS rules:

Divi's Theme Builder: Add your custom CSS rules within the Theme Builder's Custom CSS section.
Custom CSS Files: Create a separate CSS file (style.css) and link it to your theme.

Example CSS for Indentation:

ul {
  margin-left: 20px; /* Indent the list by 20 pixels */
}

li {
  margin-bottom: 10px; /* Add spacing between list items */
}

Conclusion

Troubleshooting bullet point indentation in Divi involves investigating potential conflicts with custom CSS and leveraging Divi's built-in styling options. If necessary, use custom CSS for greater control. By following these steps, you can achieve the desired appearance for your lists and create visually appealing content in Divi.

Why Don't Bullets Indent In Divi