Reduce Gap Below Bullet Sub-Lists in Accordion Module


The Divi theme comes with an accordion module, which can be used to display text in expandable boxes. When using a bullet list with a sub-list in the accordion content, you might notice that there is a reasonably large gap after the sub-list. Here's how that gap can be reduced.

First, here's how the gap normally looks:

Reducing the Sub-Bullet List Gap with CSS

The following CSS code can be used to reduce the gap:

.et_pb_accordion .et_pb_toggle_content li > ul,
.et_pb_accordion .et_pb_toggle_content li > ol {
	padding-bottom: 0.5em;

Adjusting the padding-bottom value will adjust the size of the vertical gap. 

Here's the result:


Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.