list-style-position of bullets

mhgonzalez

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

Hi,

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

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mhgonzalez

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

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

Bryan

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mhgonzalez

Sorry! The site is live now.

Bryan

Hi,

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

It has to look like this

<ul>

<li>item</li>

<li>item</li>

<li>item</li>

</ul>

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mhgonzalez

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

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

THe lists must be in <ul> 

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mhgonzalez

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

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mhgonzalez

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

Use this css 

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mhgonzalez

That works!! Thank you.