Lists & Spacing

  • Resolved wpev

    (@wpev)


    5 years, 1 month ago

    When I add a UL in the accordion, the bullet points show up while editing the block but now when the page is live. Is there a fix for this?

    Also, is there a way to changed spacing between multiple accordions? I tried adjusting margins without luck since I have one accordion abover the other like a FAQ.

    Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author philbuchanan

    (@philbuchanan)

    5 years, 1 month ago

    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 5 years, 1 month ago by philbuchanan.
    Thread Starter wpev

    (@wpev)

    5 years, 1 month ago

    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.

    Plugin Author philbuchanan

    (@philbuchanan)

    5 years, 1 month ago

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

    Thread Starter wpev

    (@wpev)

    5 years, 1 month ago

    Hi Phil,

    The page is HERE

    Thanks!

    Plugin Author philbuchanan

    (@philbuchanan)

    5 years, 1 month ago

    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;
}
    Thread Starter wpev

    (@wpev)

    5 years, 1 month ago

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

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Lists & Spacing’ is closed to new replies.