Support » Fixing WordPress » Line Spacing in Unordered Lists Site-Wide

  • I need to use nested unordered lists (unordered lists inside an unordered list). However, I’m getting an extra vertical space between the first and second ordered lines. For example:

    -First order list item

    -Second order list item
    -Another second order list item
    -Another first order list item

    In the WPBakery Editor, I can see the text is formatted like this:

    • First order list item
      • Second order list item
      • Another second order list item
    • Another first order list item

    How can I remove the extra line spacing between the first and second order lines? This is a site-wide issue, since I need to use lists inside lists throughout my website. Don’t know if it matters, but I’m using Creativo theme.

    Thanks for any help!

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • There is a CSS rule
    ul { margin-top: -14px; }
    that will give you trouble (being negative), but it is overridden by this rule

    ol, .wpb_text_column ul, .single .post-content ul, 
    .single .project-description ul, .page .post-content ul {
        margin: 20px 0;
    }

    This one says that the ul has top and bottom margins of 20px each, so that causes the gaps in your nested lists.
    Since this rule is so specific, you will have to duplicate it with a different value, to change it, instead of just styling ul.
    There is likely a mismatch in the styles used in the editor.
    You should ask your theme author to fix it for everyone.

    Thanks for looking into it Joy.

    The ul { margin-top: -14px; } is probably from me trying different things to fix/override the theme’s styling. So if that wasn’t there…is there a different solution other than just contacting my theme author?

    Okay, I see that I can just change 20px to 0px. But now I’m curious but why does that only change the lines that are part of the lists within lists? It seems like it would change all uls…? (Obviously I know very little about CSS!) 🙂

    Joy

    (@joyously)

    A list is <ul><li>one</li><li>two</li></ul>. Think of those spaces at beginning and end as the margins.
    When you nest them, it will be
    <ul><li> <ul><li>one</li><li>two</li></ul> </li><li>two</li></ul>. See the spaces (margins) that are in where you don’t want them?
    The rule is for ul not for the lis that are each item. And yes, it does affect all uls, not just the ones nested, but it’s only really visible where nested.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.