Dear members of the support forum,
I am trying to move the bullet points (markers) of an unordered list down. I would like to move them down just a few pixels, but I don’t know how.
Here is a link to the page:
https://www.maartenontwerp.nl/website-onderhoud/
It’s about the orange markers. I already changed the colour and the size with this code:
li::marker {
color: #ff9001;
font-size: 28px;
}
Your help will be highly appreciated!
Hey pelgrimrat,
Thank you for the inquiry.
For some reason, the position of the marker is not adjustable. Please remove the previous modification, then add this css code instead.
.entry-content-wrapper div li:before {
content: '';
width: 8px;
height: 8px;
display: block;
background: #ff9001;
border-radius: 100%;
float: left;
top: 8px;
position: relative;
margin-right: 8px;
}
Best regards,
Ismael
Hi Ismael,
Thank you very much for your reply!
I have tried your code and this solved the problem, so thank you!
After I added your code, the “default” bullet points were still there. To remove these, I made some changes in my code.
The code now looks like this:
/* bullet points */
li::marker {
color: transparent;
font-size: 28px;
}
.entry-content-wrapper div li:before {
content: '';
width: 9px;
height: 9px;
display: block;
background: #ff9001;
border-radius: 100%;
float: left;
top: 8px;
position: relative;
margin-right: 14px;
margin-left: -24px;
}
Hi pelgrimrat,
I’m glad that you were able to figure it out. :)
Thanks for posting the solution that worked for you and thanks as well for using Enfold.
Have a great day!
Best regards,
Nikko