How to change css styling on ordered and unordered lists?

[Donna Green]

Hi there

Please could you tell me how to change the styling on ordered and unordered lists?

I have a list in a blog post here, but I would like more space between each list item – they are a bit too squashed up at the moment.

I’d also like to have more space between the numbers and the paragraph text. So there would be more space between 1. [start of paragraph] if you know what I mean?

I’d really appreciate it if you tell me how to do this, thank you.

[Sushil Adhikari]

Hi Donna,

You can try with this example to keep space between 1 and paragraph.

.entry-content ol li {
    padding-left: 10px;
}

Note: Please change the padding-left value as per your requirement and use child theme or additional css section of customizer to add this custom css.

Thanks

• This reply was modified 6 years, 6 months ago by Sushil Adhikari.

[Donna Green]

Hi Sushil, many thanks for your reply, but unfortunately it does not work … My list looks exactly the same?

I would also like to increase the spacing vertically between each list item, as well as the space between the number and the start of the text.

Is there anything else I can try please?

Thank you so much,
Donna

[Sushil Adhikari]

HI Donna,

Could you tell us where did you have added code , we didn’t see code you added on your website. Could you please clear the cache and let us know how it goes for you?

Thanks

[Donna Green]

Hi Sushil,

I put it in my child theme css file: Donna Green Photography: Stylesheet (style.css)

But nothing is happening? Also, I would like to increase the vertical space between each list item too and would be very grateful if you would show me how, please.

Thank you!
Donna

[Sushil Adhikari]

Hi Donna,
Please make the following changes in your child theme style.css file;

ol li {
	padding-left:10px;
	margin-bottom:10px;
}

Hopefully it works!
Thanks !

[Donna Green]

Hi Sushil, I’m afraid that doesn’t work either! I’ve put it in my child style.css file but nothing happens at all…

🙁

[Sushil Adhikari]

Hi Donna,
Please check your code once again,
You have written;

/* CHANGE STYLING OF LIST ITEMS ^/
 ol li {
    padding-left: 10px;
}

You need to write;

/* CHANGE STYLING OF LIST ITEMS */
 ol li {
    padding-left: 10px;
    margin-bottom: 10px;
}

or else try

/* CHANGE STYLING OF LIST ITEMS */
 ol li {
    padding-left: 10px!important;
    margin-bottom: 10px!important;
}

It will definitely work.
Thanks!

[Donna Green]

Ohhhhhhhh no, I am so sorry! It was a typo! Thank you very much for spotting this! And yes, it does work now, fantastic.

One more thing though … the numbers are not left-aligned properly – please could you tell how to pull the whole list over to the right a little, so the numbers are not sticking out into the left margin?

Thank you!

[Sushil Adhikari]

Hey Donna,
If you want to push the whole list towards right along with the list number,
Try this;

ol li {
margin-left: 20px;
}

You can adjust the pixel according to your choice.
Thanks !

[Donna Green]

Perfect! Thank you so much for your help Sushil. 🙂

[Sushil Adhikari]

You are welcome ,Donna

[Donna Green]

Sushil, I’m so sorry, I really need more information please …

Although your code made my lists look perfect, unfortunately it completely messed up my horizontal nav bar on every page, because of course that’s a list too.

Is there any way I can change the spacing for list items on a page, in the body of the text, but NOT have it change the nav bar please?

Thank you so much
Donna

[Styled Themes]

Hi Donna,

you can just change the CSS you added earlier to this to affect only the body of the text.

.entry-content ol li {
margin-left: 20px;
}

regards
Imre

[Donna Green]

PERFECT! Thanks a million Imre, that’s brilliant! All sorted 😀

[Author]

Posts