list-style-position of bullets

mhgonzalez · March 2017

How can I change the list-style-position from inside to outside for the bullets on my website? For example, I want the second line of a <li> to indent to line up under the first line of text (where the bullet itself is completely to the left of all text). Currently, the second line of text falls directly under the bullet point.

I added the following to my custom css, but nothing changes:

ul {
    list-style-position: outside !important;
}

Bryan · March 2017

Hi,

Please send a link to the page with this list so we can check it on our own.

thanks

mhgonzalez · March 2017

http://macedloans.kypolicy.us/choose-a-crowdfunding-platform/

This is one page, but I would like the change to be site-wide.

Bryan · March 2017

You have coming soon enabled on your website, please disable it at let us know.

mhgonzalez · March 2017

Sorry! The site is live now.

Bryan · March 2017

Hi,

This is because you make your list element not in <ul>

It has to look like this

<ul>

</ul>

And use the css to make it move to the left a bit

ul {
margin-left:15px !important;
}

mhgonzalez · March 2017

I added the above css in my custom css settings.

But, the reason I left the <ul> tag off is because when I use it, the bullets disappear. On the link above, I have added <ul> to the box on the left ("Crowdfunding Models") and the bullets go away. Here's what I have in the content box:

<h5 style="text-align: center; color:#235e9f;">Crowdfunding models:

</h5>

<ul>

<li style="text-align: left; color: #444444;"><strong>All-or-nothing</strong> – You will not receive any funds and your supporters will not be charged if you do not reach your goal. This can be a good choice for projects that require set funding to enter production.</li></br>

<li style="text-align: left; color: #444444;"><strong>Keep-what-you-raise</strong> – This model is better for projects that have no minimum amount needed to get started. A good example for this type of funding is raising money for philanthropy.</li>

</ul>

Bryan · March 2017

Can you please explain what exactly are you trying to achieve?

THe lists must be in <ul>

thanks

mhgonzalez · March 2017

There are 2 issues:

1. I want bullets (adding <ul> deletes the bullets, as stated above).

2. I want the 2nd line of text in a <li> to line up under the TEXT above, not the BULLET.

Example: http://reference.sitepoint.com/css/list-style-position/demo - I want all <li> to look like the top example ("One, two, three..."). Currently, all of my bullets look like the bottom example ("Gimme the microphone").

My understanding is that this can be achieved with the "list-style-position: outside" property. I just can't figure out how to apply it on ALL <ul> on my site.

In custom CSS, I have:

ul {

list-style-position: outside !important;

}

Bryan · March 2017

yes, this is all doable. Just please add <ul></ul> to every list on the page and let us know, then we will write you custom css.

mhgonzalez · March 2017

I put all of the lists in <ul></ul> tags on the page above. The bullets in the bottom section did exactly what I am looking for. The bullets in the top grey boxes ("Crowdfunding Models" and "Type of Incentive") disappeared, even though the code includes the code for bullets. (see code in March 20 post above)

Bryan · March 2017

Use this css

ul {
	list-style-type:disc !important;
}

mhgonzalez · March 2017

That works!! Thank you.

list-style-position of bullets

Comments