Lists & Spacing

The ul issue would be a theme specific thing. For example, using the default Twenty Twenty One theme, the bullet points show in both the editor and the frontend of the site. Your theme is likely doing something to hide the bullet points on the frontend.

You can add spacing below an accordion item using some custom CSS. For example:

.c-accordion__item {
    margin-bottom: 24px;
}

• This reply was modified 3 years, 11 months ago by philbuchanan.

Thanks for the quick response Phil. Good to know about the bullet points. I was able to get them to show up with some CSS.

As for the spacing, I’m trying to reduce the spacing between accordions. I used the same code you added but with a 0px margin on top and bottom and tried with no padding as well but they are still spaced pretty far apart. Open to any suggestions.

@wpev Can you share a link to the page for me to take a look?

Hi Phil,

The page is HERE

Thanks!

It looks like your theme has a pretty specific CSS selector that is overriding my suggestion above. This is in your theme:

.entry-content > [class*="wp-block-"]:not(:last-child) {
    margin-bottom: 1.5em;
}

You’ll need either a more specific selector or to use !important.

So this:

.entry-content > [class*="wp-block-"]:not(:last-child).c-accordion__item {
    margin-bottom: 0;
}

Or this:

.c-accordion__item {
    margin-bottom: 0 !important;
}

You will also need to remove the bottom margin from your h2 for accordion titles:

.c-accordion__title {
    margin-bottom: 0;
}

Perfect, thanks so much for the help and great plugin!