A Solution To A Small Annoyance
If you ever use bullet or number lists inside Divi textareas, you may face a small problem with the spacing at the top and bottom of the list. This has annoyed me, so today I am sharing what I believe is the best solution for it. In this tutorial, I will show you how to adjust the spacing around ordered number and unordered bullet lists in Divi text.
▶️ Please watch the video above to get all the exciting details! 👆
Add CSS To Adjust The Spacing Above And Below Lists In Divi
As usual when I first decided to solve this little, I tried to think of the best way to approach it.
A Possible Solution – Inline CSS…
I have been known on occasion to add style tag inside a heading or paragraph tag using inline CSS. For example, if I faced this only at one specific location, I may add style=”margin-bottom: 20px;” or something like that to a <h2> or <p> tag above a list.
<p style="margin-bottom: 20px;">
This is a paragraph above a list.
</p>…But Only For One-Time Cases
That can work well, but the downside to using an inline tag is that it will only apply to one spot and can make changing it in the future either by yourself or someone else more difficult. It’s always best to add CSS in your Theme Options or in a child theme style.css file because then you can change it from one location, and it will update everywhere that it is used.
Another Possible Global Solution…
The next things I tried was adding margin to the top or bottom of the list like this:
/*add spacing to the top of a list*/
.et_pb_post_content .et_pb_text ol,
.et_pb_post_content .et_pb_text ul {
margin-top: 20px;
}Notice that I am targeting only the text in a Theme Builder template. This is a nice trick if you only want this code to apply to ordered or unordered lists on your single blog posts.
…But With Problems
But this also comes with some issues that I didn’t realize at first. There are some situations where you may not want the margin to apply, like if there is a paragraph before or after the list or not. If you add margin to the bottom of the list, it works great if there is another paragraph after it. But if there is not, then it looks like extra space. Or maybe the list is at the top of textarea, and so you don’t want to add extra space there – you only want to add it if there is a paragraph above it.
The Best Solution
Then I remembered something called sibling selectors. These are used in CSS to select elements under specific conditions. In our case, we only want to target a list if there is a paragraph above it, or we only want to target a list if there is a paragraph below it.
Sibling selectors work by using two selectors, but the value only applies to the second element if it immediately follows the first element. Both elements need to be children of the same parent, which is true with text in a textarea in Divi. The examples below will help to explain it, and be sure to watch the video embedded above to see this all in action!
As you may see, this still had some quirks that needed to be solved. It requires a separate snippet for lists that have a paragraph after them than for those that do not. Otherwise, these snippets are pretty straightforward.
Please remember to adjust the values. You can also use negative values as needed.
Adjust Space Above A List That Follows A Paragraph
/*adjust the spacing above the list by targeting the <ul> element that immediately follows the <p> element*/
p+ul {
margin-top: 20px;
}Adjust Space Above A Paragraph That Follows A List
/*adjust the spacing above the paragraph after a list by targetting the <p> element that immediately follows the <ul> element*/
ul+p {
margin-top: 30px;
}I hope you found this little code exploration helpful! If so, let e know in the comments. And be sure to let me know if you found an even better solution, or an alternative one. There are often more ways to do something than one, and it’s fun to try to find the most efficient method.
Hi Nelson!
Thanks for the great Divi tutorials. They have always been a great resource particularly as solutions for some of the peskiest emergent problems. Kindly do a future post on styling ordered lists, and nested lists in the text module. As always, many thanks!!
Hey there! I’ve been tasked with fixing this problem on a client’s website. I tried putting the sibling code into the custom css of the site and it’s not changing anything. If I paste the code into the custom css for the text module I can get the space underneath the ul to change, but he space above the ul doesnt’ change. The page I’m trying to get it to work on is https://mountainlaurel.org/our-school/employment-opportunities/
Hi Brian!
Please add the following code and see if it helps:
.et_pb_text ol,
.et_pb_text ul {
margin-top: 20px;
margin-bottom: 20px;
}
You can use the custom class in place of .et_pb_text as well.
Great tutorial! Your detailed explanation of using sibling selectors to adjust spacing around lists in Divi is truly helpful. I’ve faced similar spacing issues before, and your approach seems like a smart solution. Thanks for sharing this coding insight and the clear examples. Looking forward to trying it out on my own projects. Keep up the fantastic work.
Hi Pritam,
It’s great to hear that the tutorial was helpful! I am glad to hear this, and hope you find all our other resources helpful as well!
Ty TY. I had this a while ago when I put some icons in.(using your code)mucked anout for a while trying to get it right, then just left it. Sure no one cared but I cringed every time I looked at it.
Hi Peter!
Sorry, the issue is not clear. Can you please share the page URL with me?