Bulletpoint Spacing

Evening,

I’m hoping I can take a space [return] between bullet points and the space will show.

Is there any CSS that will do this?

Thank you,
Gemma

Hi Gemma,

Thank you for reaching out to us. You can increase the spacing between bullet points using CSS, try adding the following code in the Theme Options > CSS:

.entry-content li {
    margin-bottom: 10px;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

Brilliant!

TY

Glad it helped.

Actually…

I don’t want all bullet points to have a space, just when I hit return and leave a space. Even when I do this in Wordpress, it just ignores the instruction [before I added the CSS code].

Example:

If you look at ‘The Best Districts’ section, these bullet points should be tight together [neat] but the Downtown Hotels section should have a space between bullet points because they are more text heavy.

Thanks.

Hi Gemma,

In that case, you may set the margin bottom in the code previously provided to 0.

That way the default display for the bullet points in the same list is 0.

Then if you want some a space between the bullet points, try creating then as a separate list.

Hope this helps.

Hi Jade,

I changed to 0 but there is no space when I hit return. Now all the bullet point lines are close together like the starting point.

Thanks,
Gemma

Hi Gemma,

You can try it this way instead:


1. Leave the code in the Global CSS:

.entry-content li {
    margin-bottom: 0px;
}

If this is code is present on the site, the default display for the list is that there will be no spacing between each item.

2. Then add this code to the Global CSS as well:

.entry-content ul.with-space li {
    margin-bottom: 10px;
}

3. Now, if you want some space between the lists item, you just have to add the class with-space to the <ul> element where you want some space between list items like this:

Since you have added the code from the second step, you just have to add the class with-space to the ul.

Hope this helps.

Thanks. Where is Global CSS? I can only find additional.

Hi Gemma,

It is in X > Theme Options > CSS:

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.