Bullet List Indent not Working

  • Unknown's avatar
    maholzba · Member ·

    Hi – Bullet list indent is not working in final published view or previews. Drafting the content works for me in the template and looks great, but when it goes to preview or the final published piece, the list is not indented and I can’t seem to figure out how to modify it. Any suggestions? See here https://alongroadtoironman.wordpress.com/

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    mapetrei · Member ·

    Hello @maholzba!

    The bulleted list shows for me! Please make sure you clear your browser’s cache or that you test the link in an incognito window.

  • Unknown's avatar
    mapetrei · Member ·

    Now I realized that you are talking about the indentation space. I’m looking on this.

  • Unknown's avatar
    mapetrei · Member ·

    The indentation works (there’s padding-left:30px; added up to the
    html tags). However the bullets are remaining on the left.

  • Unknown's avatar
    helper-mobilefox · Member ·

    Hi maholzba,

    I think I see what you mean on your latest post. You want the bullets to be further in than they currently are, right?

    Are you using the Visual Editor or HTML? Both have different tools for making sure your formatting is reflected in your posts. Check out the support page here for making indents using the Visual Editor https://en.support.wordpress.com/visual-editor/#outdent-indent. Check out this page for support using HTML. You’ll want to use the preformatted text option. https://en.support.wordpress.com/advanced-html/#preformatted-text

    Sarah

  • Unknown's avatar
    mapetrei · Member ·

    If you have a plan that allows advanced custom design, you can also add this line in the Custom CSS field and things will look perfect:

    li {
    list-style-position: inside;
}
  • samva8c · Staff ·

    Hi maholzba,

    It looks like you’re using the Twenty Sixteen theme on your site. I was able to test what you’re seeing and was able to reproduce it. The bullets on the list do indeed stay to the left of the entry content once published.

    While I’m not sure if this is how the theme was coded to function, if you’d like to indent only the bullets in a particular post, instead of the entire site with the excellent CSS code snippet @mihaiapetrei has provided, you can achieve the desired effect by adding some HTML to your list.

    Switch to the text (HTML) editor and look for the “ul” tag. That tag indicates the start of your bulleted list. You can then use the following code to indent your bullets:

    <ul style="margin-left: 50px;">
	<li>bullet 1</li>
	<li>bullet 2</li>
	<li>bullet 3</li>
	<li>bullet 4</li>
</ul>

    If you have more than one list that you’d like to indent, you will need to add the style tag and information to the “ul” tag for each list.

    Hope this helps!

  • The topic ‘Bullet List Indent not Working’ is closed to new replies.