Recently, I was editing the CSS of one of the pages on Website Promoters. An issue that arose was making an ordered list more readable since, by default, all the list elements of the ordered list had no spacing between each element in the list. An ordered list appears, as shown in the example below.

1. List Item #1
2. List Item #2
3. List Item #3

As seen above, there isn’t a lot of spacing between each list item. With lists that include more text, this can quickly become an eyesore. Typically, paragraphs of text in WordPress can be made more readable in various ways. This can include increasing the line height of the text in the module being used. Additionally, the padding or spacing at the bottom of a list item can be increased from the default value of 0px.

However, this option isn’t available for ordered lists or unordered lists. The way to make lists more readable is to add custom CSS to the module. Each list, whether ordered or unordered, is a collection of li or list HTML elements. For each list item, the list elements’ bottom spacing or bottom margin. Spacing enlarges the HTML elements container, whereas the margin increases the distance between the containers of adjacent HTML elements. When applied to a text module, the CSS below should make any list more readable.

ol li, ul li {
padding-bottom: 10px;
}


If you want to learn more about optimizing your online presence, including through Google ad groups, fill out our contact form now to contact us. We offer a FREE website analysis, which can provide valuable insights into your current marketing strategies. Additionally, if you want to explore more blog posts related to SEO, Divi, WordPress, WordPress plugins, digital marketing, computer science topics, or other related subjects, visit our website’s blog section.