Lists Using FA or SS Adding extra bullet in front of them

[jbensous]

I tried using a few methods in here to resolve my bulleted list alignment problem. Presently I have both of these in my custom CSS theme area:

.box-content-wrap ul li {
padding-left: 0.7em;
text-indent: -1.3em;
}

.spb_text_column ul, .box-content-wrap ul {
list-style: disc outside none !important;
}

Now my “regular” bullets are aligning properly. However, whenever I use your shortcode to create lists that have the font awesome or SS icons … it adds a disc bullet in front of the font awesome or ss list icon so there are now two bullets in each list item. I am tasked with getting this site live by Monday. What can I do to fix this problem?

Thanks a bunch!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

I cannot see your page without a login, guessing it’s not published.

Please create a test page with both list items so we can see the issue. Please also remove the custom CSS so we can properly address this issue.

Thanks.

[jbensous]

Hi,

Here is updated link (we just pointed domain yesterday): http://www.5nine.com/5nine-manager/

I removed the CSS code. What I am trying to do is have the copy align properly for the bullets. I found CSS code to align it in another post, but when I used it – it did align the copy to the right of the bullet – however, it added an additional bullet to the left of the list icons and it pushed the actual list bullets to the left of the entire copy block. How can I get the copy to line up properly for both the regular ul / li bullets as well as the shortcode list fa/ss icons lists?

Thanks!

[David Martin – Support]

Thanks, please test this CSS:

.sf-list li span {
    display: block;
    max-width: 100%;
    margin-left: 15px;
}
.sf-list li i {
    float: left;
    margin-top: 4px;
}

[jbensous]

This code helped with the lists that have fa/ss icons. However, the regular bulleted lists are still not aligning properly. I had to remove the other code because it kept putting bullets in front of the fa/ss list items. How can I get the regular bullets to align properly, without messing up the now corrected fa/ss list items?

URL: http://www.5nine.com/5nine-cloud-security/

The top section uses regular bulleted list.

Also, on this page the list with fa/ss icon is cascading. no idea why because none are indented: http://www.5nine.com/5nine-v2v-easy-converter/

[David Martin – Support]

Ah yes, I see.

Please replace the previous with this updated CSS:

.sf-list {
  margin-left: 0 !important;
}
.sf-list li span {
    display: block;
    max-width: 100%;
    margin-left: 20px;
    float: left;
}
.sf-list li i {
    float: left;
    clear: both;
    margin-top: 4px;
}
.spb_text_column ul, 
.box-content-wrap ul {
    list-style: disc outside none;
    margin-left: 15px;
}

[jbensous]

That helped the regular bullets, but now the icon fa/ss list is messed up again: http://www.5nine.com/5nine-cloud-security/

sorry. 🙁

[David Martin – Support]

In the above code, find this:

.sf-list li span {
    display: block;
    max-width: 100%;
    margin-left: 20px;
    float: left;
}

Delete this: float: left;