Table of Contents List Left Margin Off

  • Resolved dukearmi

    (@dukearmi)


    6 months ago

    Hi there,

    I’m facing a strange issue with padding in the table of content block. I put it in the sidebar, and for some reason Kadence blocks CSS gives the list (not the title) a 1.75em left padding. Is this the defualt setting? I couldn’t change it anywhere. It’s coming from (https://www.aviamonde.com/wp-content/plugins/kadence-blocks/dist/style-blocks-tableofcontents.css?ver=3.2.39):

    .kb-table-of-content-nav .kb-table-of-content-wrap .kb-table-of-content-list {
    margin: var(--global-kb-spacing-sm, 1.5rem) 0 0 0;
    padding-left: 1.75em;
    list-style: disc;
    • This topic was modified 6 months ago by dukearmi.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support karlalevelup

    (@karlalevelup)

    Hi there!

    Glad you reached out to us.

    Yes, the 1.75em left padding is a default style from our plugin. This is to show the list item dots inside the container – https://share.zight.com/kpuZNnKl

    I’m not sure why your list items don’t have the dots, but if you want to remove the left padding, you can add this to your website’s Customize > Additional CSS as there is no built-in option to remove it:

    .kb-table-of-content-nav .kb-table-of-content-wrap .kb-table-of-content-list {
    padding-left: 0;
}

    I hope this helps, and let me know if I can assist you further.

    Regards,
    Karla

    Thread Starter dukearmi

    (@dukearmi)

    Hi Karla,

    I’m not sure why my list items don’t have the dots either, but it’s fine.

    The code you provided didn’t work for some reason, but it did work by adding the ID like so:

    	.kb-table-of-content-nav.kb-table-of-content-id0eb424-e2 .kb-table-of-content-wrap .kb-table-of-content-list {
		padding-left: 0;
}

    Thank you very much!

    Plugin Support karlalevelup

    (@karlalevelup)

    Hi there!

    Glad to know that you were able to tweak the code.

    However, you can also do it this way:

    1. Add an Additional CSS class to the ToC block. The option can be seen under its Advanced tab in the block settings.
    2. Edit the code snippet like this:
    .additionalCSS.kb-table-of-content-nav .kb-table-of-content-wrap .kb-table-of-content-list {
		padding-left: 0;
}

    This should help you better if you have multiple ToC blocks to adjust. Block IDs are unique, so it will require more lines of codes if you’ll use their IDs in the CSS code.

    Regards,
    Karla

    Thread Starter dukearmi

    (@dukearmi)

    Hi Karla,

    Thank you for the recommendation. I think your way is much better and I would love for it to work because it would be much more convenient. Alas, though, it’s not working for some reason. I’m not sure why because it should work (given my limited knowledge of CSS lol).

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Table of Contents List Left Margin Off’ is closed to new replies.