Home › Forums › WordPress Themes – Premium › Pure & Simple › How to change css styling on ordered and unordered lists?
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.
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
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
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
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
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 !
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…
🙁
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!
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!
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 !
Perfect! Thank you so much for your help Sushil. 🙂
You are welcome ,Donna
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
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
PERFECT! Thanks a million Imre, that’s brilliant! All sorted 😀
With our premium themes, we offer access to site documentation, video tutorials and timely support. Even if you have just started on WordPress, our support staff have the patience to help you create appealing sites gracefully.
Company
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.To find out more, including how to control cookies, see here: Privacy Policy
© Copyright © 2023 Styled Themes. All Right Reserved.