Fixing bullet points layout

• 

  berry1985 · Member · Sep 18, 2015 at 2:08 pm

  • Copy link
  • Add topic to favorites

  Hi there

  I’ve not used CSS before and I understand I need a code to be able to correct how the bullet points are set out on my site.

  I’m using the Apostrophe theme. Currently the bullet points don’t indent, which I’d like them to do. Also, the text following the bullet point isn’t indented, as in the next line of text ends up underneath the bullet point rather than next to it, rendering the bullet point fairly redundant.

  A fix for this would be great – thanks.

  Also, if you could let me know what I’m supposed to do with the code, that would be great as I’ve not used this before.

  Cheers,
  Christopher

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

• 

  thesacredpath · Member · Sep 18, 2015 at 8:05 pm

  • Copy link

  Hi Christopher, we can indent the list and fix the alignment with CSS. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS. You can adjust the left padding as desired.

  .entry-content ul, .entry-content ol {
      padding-left: 50px;
      list-style-position: outside;
  }

• 

  berry1985 · Member · Sep 18, 2015 at 11:24 pm

  • Copy link

  Hi, thank you for that, though I’ve done what you said – pasted that code into the CSS box, and nothing’s changed with the bullet points alignment. Am I supposed to do something else as well?

• 

  thesacredpath · Member · Sep 19, 2015 at 1:04 am

  • Copy link

  Ok, let’s change it from padding-left to margin-left and then you can play with the 30px value as desired. 50px seems reasonable.

  .entry-content ul, .entry-content ol {
      list-style-position: outside;
      margin-left: 30px;
  }