Too much space before bullets

[AmyRogers]

I am working on a client's site and she is very unhappy - to the point that she can't see anything else - with the amount of space before a bullet list.

Here is a link to a page that shows it.

http://www.writingrogers.com/?page_id=216

Anyway, is this built into the font, or is there something I can change in the CSS to reduce this space? Thanks for any help you can offer on this!

Amy

http://writingrogers.com

[Brad West]

That spacing is pretty standard, but if you need to change it you could add a negative indent. This will only affect the first line of the list item.

For the lists I see on the page you liked to, you could add negative indent like this:

.entry-content ul li {
    text-indent: -8px;
}

Although that will also change any bullet lists in any post content area on the whole site.

Failing that you could add your list items inside a span and then adjust the position. Here's a tutorial on StackOverflow: http://stackoverflow.com/questions/4373046/css-control-space-between-bullet-and-li

[AmyRogers]

Brad, thank you so much for your help! Unfortunately I don't think I was clear in my original post. There is too much vertical space above the first item in a bullet list. So I'm trying to shrink that. If you have any thoughts I would really appreicate it!

[Brad West]

OK. I see what you mean. That's the margin on the bottom of those p elements; females, males, etc..

You've got margin-bottom of 26px on p elements inside your entry-content area. See line 1542 in your stylesheet.

You could do something like this:

.entry-content p {
    margin-bottom: 0;
}

Of course that will remove the margin for all paragraphs in your entry content area so you probably don't want to do it that way.

You've got some divs in there like this:

<div class="one-fourth first">

I'd add a new class to those and that way you can target them specifically. Something like this maybe:

<div class="no-margin-bottom one-fourth first">

Then you can add this in your stylesheet:

.no-margin-bottom p {
  margin-bottom: 0;
}

[Author]

Posts