Unordered list indentation

You should ask in your theme’s support forum.

Try adding this rule to your custom CSS (Appearance → Customize → Additional CSS):

.hentry ul ul {
    margin-left: 20px;
    margin-top: 1em;
}

The margin-left property adjust how much indentation there is and the margin-top property adds enough space for a blank line to the top of the indented list.

Try this css rule in css file

body.page #content article ul > li {
    margin: 0px !important;
    line-height: 1.8;
}

Neither of those last suggestions worked for me (11/8/19, WordPress 5.2.2 running Twenty Fifteen theme). I would love a suggestion that would enable me to use bullet/unordered list blocks in this theme and not have the bullets hang out to the left of the rest of the text (surely this is a bug in the theme or the handling of list blocks in WP?)

• This reply was modified 5 years, 3 months ago by cstweb. Reason: Slight wording changes and ticking for Email notifications

@cstweb, you probably need to set the list-style-position property of the list. Can you please post a link to the page which shows the problem?

By the way, one of the policies of this forum is if you have a problem, even if you think it is similar to someone else’s, you should start a new thread instead of jumping in on that one. Thanks.

Sorry if I’m posting in the wrong place, with hindsight I can see that a new thread with a back reference is cleaner: apologies.
list-style-position didn’t seem to fix it.

The example is at: https://staging.coresystemtrust.org.uk/site-use-information/. It’s not a particularly clear one but you can see that the left margin of the title, the small text first block and the social media links are all aligned but the bullets of the unordered list hang out to the left which seems really ugly!

I put

ul.inside {
  list-style-position: inside;
}

in style.css and marked the block in site-use-information in block, advanced, additional CSS Class with ul.inside.

I don’t think I’m doing this right though as I also tried changing color in ul.inside and it’s not changing the text color so presumably there’s something I’m missing about how to change additional CSS classes. TIA, Chris

The problem is how you assigned the class name to the <ul> element:

<ul class="ul.inside">

Take the ul. off so it looks like this, and leave the CSS rule that you wrote alone (it’s fine):

<ul class="inside">

That’s not doing it. Assuming that you’ve got it working on some other site, can you see what might be making the difference? Theme? Twenty fifteen is a WP theme so I’m surprised. My guess is that something built into my site is preventing that CSS impacting but, as you can tell, I’m a CSS newbie.

If I use SelectorGadget to look at the page it either shows li as the CSS, and shows it applying to all the entries in the main menu: I don’t want them moving(!). I don’t know how reliable that is as tool.

I have tried adding !important to the ul.inside lines but no effect, I tried creating a li.inside {} block: no effect (so I deleted that).

I’m baffled and frankly baffled that Gutenberg doesn’t handle indentation and outdentation simply: searching around I can see I’m clearly not the only one!

It changed on my end. Try clearing your browser’s cache. Then you can remove the !important clause.

You’re a star CrouchingBruin, can’t believe it was that simple and that it hadn’t occurred to me. I’m dementing. I can go through now and find all my “<ul” and fix them, and fix some horribly clunky text workarounds I’d used.

I forgot to say “Thanks” last time too so “Thanks^2”! I still can’t believe that Gutenberg removed easier ways to this but you’re the cavalry! Hm, faint resemblence to the helicopter commander in Apocalypse Now in that avatar/selfie now I come to think about it!) Thanks again! Chris