Bullets too far tothe left.

Hey. Firstly, you’ll need to create a child theme or install a custom CSS editor. You will need to insert CSS into either your child theme’s style.css file or your custom CSS plugin’s editor.

I have two CSS snippets for you to choose from – they create a slightly different look to each other. The first snippet brings the bullet point ‘inside’ each list item so that it is part of the text flow, the second keeps the bullet point outside of the text flow. Hope that made sense. Try them both out and choose which one you prefer.

Copy and paste either:

ul {
list-style-position: inside;
}

Or:

li {
margin-left: 20px;
}

For the second snippet, you can increase or decrease the value of margin-left as you wish in order to widen or decrease the gap between the bullets point and the edge of the site.

Hope one of these solutions suits your needs.

hi,

the issue is that some style definitions are resetted in your style.css. You’ll have to define a padding-left for your ul elements.

Look for a custom css styling option in your theme where you can add
ul { padding-left:40px; } which should solve your issue.

Thank you both so much!!!! I thought I was going crazy trying to figure this out.

Glad to see you got it fixed. Have a great day.

I’m having the same trouble but I’m still a bit lost on where to fix the problem.

Here’s what my style.php says:

.post ol {
list-style: decimal;
margin: 20px 45px;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
padding: 10px 10px;
}

.post ol li ol {
border: none;
margin: 20px 45px;
padding: 10px;
}

.post ol li ol li ol {
border: none;
margin: 20px 45px;
padding: 10px;
}

.post ol li {
margin: 0px 0px 20px 45px;
}

.post ul {
list-style: disc;
margin: 20px 45px;
padding: 10px;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}

.post ul li ul {
border: none;
margin: 20px 45px;
padding: 10px;
list-style: circle;
}

.post ul li ul li ul {
border: none;
margin: 20px 45px;
padding: 10px;
}

.post ul ul li {
border: none;
margin: 0px 0px 20px 45px;
}

.post ul li {
margin: 0px 0px 20px 45px;
}

.post dl {
margin: 20px 45px;
float: left;
}

Can you tell me where to add/change/etc. to fix my bullet problem?

I’d be MOST grateful! Thanks in advance!

@daphnedelay: As per the Forum Welcome, please post your own topic. This topic has been resolved.