Bulleted lists don't have hanging indents

  • Author
    Posts
  • #109704

    Is it possible to fix the core CSS so that bulleted and numbered lists have a hanging indent? If not, can you please provide the necessary CSS edits so I can do this myself?

    The blog I need help with is nataliehanson.com.

    #109829

    rezzap
    Staff

    Hi Natalie,

    You can add the following CSS so that the bulleted and numbered lists have the hanging indent on your site:

    ul li {
        list-style: outside;
        margin: 5px 0px 5px 25px;
    }

    Edit the margin as desired.

    Thanks!

    Rebecca

    #109836

    Thank you!

    #109839

    That fixed my bulleted lists, but didn’t work for numbered lists. I tried to do this:

    ol li {
    list-style: outside;
    margin: 5px 0px 5px 25px;
    }

    It created a hanging indent, but converted the numbers to bullets. I am not sure what I’m missing. Here is an example – https://nataliehanson.com/2016/03/03/javelin-sales-compensation-reports/. Just before the closing paragraph.

    #109841

    rezzap
    Staff

    Hello!

    You almost had it, try adding the style type:

    ol li {
        list-style: outside;
        margin: 5px 0 5px 25px;
        list-style-type: decimal;
    }

    Thanks!

    Rebecca

    #109847

    Got it – thanks again!

    #109849

    rezzap
    Staff

    You’re welcome! :)

    Cheers,

    R.

The topic ‘Bulleted lists don't have hanging indents’ is closed to new replies.