Bulleted list alignment

[QuenchStudio]

I’m using bulleted (and icon) lists throughout the site I’m doing and they aren’t lining up nicely once the text goes more than one line. The second line/s don’t indent to align with the first. The numbered list work fine, but not bulleted. Is there a way to fix this?

You can see an example here: http://www.prsaboston.net/prsa-preview/professional-development/apr-accreditation/

[Kyle – SUPPORT]

Hi

Try adding this to your custom css:

.sf-list {
padding-left: 1.3em;
text-indent: -0.7em;
}

– Kyle

[QuenchStudio]

Kyle – it kind of worked for the Star icon list I have on that page, but didn’t work at all for a regular bulleted list.

[Kyle – SUPPORT]

Try this instead:

.spb-asset-content ul li {
  text-indent: -0.9em;
  padding-left: 1.3em;
}

– Kyle

[QuenchStudio]

OK – that aligned the regular bullets, but not the icon ones. Plus, I am using the Star on this page, would spacing need to be adjusted for any icon? Sorry to be a pain.

-Kendall

[Mohammad – SUPPORT]

Hi,
Please use this custom css code-:

.spb-asset-content ul li {
padding-left: 1.3em;  
text-indent: -0.9em;
}

.spb-asset-content ul.sf-list li {
padding-left: 1.3em !important;
text-indent: -0.7em !important;
}

Thanks 🙂
With Best Regards
Mohammad

[QuenchStudio]

The sf-list one didn’t work but I used this:
.spb-asset-content ul.sf-list li {
padding-left: 1.6em !important;
text-indent: -1.6em !important;
}
and it worked great.

Thanks,
Kendall

[Mohammad – SUPPORT]

Hi,
You most welcome. I’m glad that issue resolved.
Thanks 🙂
With Best Regards
Mohammad

[QuenchStudio]

OK – new issue has arisen in regards to the ul il functions. The icons and bullets lists are fixed using the above code snippets. Then gravity forms had an issue and another code snippets was required to make it work. Problem now, is the blog page uses the same “.spb-asset-content ul li” style and everything is out of alignment. What can the fix be? Will share link in a private message next.

Thanks,
Kendall

[QuenchStudio]

This reply has been marked as private.

[Kyle – SUPPORT]

Please only use this css:

.spb-asset-content ul.sf-list li {
padding-left: 1.3em !important;
text-indent: -0.7em !important;
}

and remove

.spb-asset-content ul li {
padding-left: 1.3em;  
text-indent: -0.9em;
}

– Kyle

[QuenchStudio]

Yes, that fixes the blog page alignment – but messes up the icon and regular bulleted lists = ugh
http://www.prsaboston.net/prsa-preview/professional-development/apr-accreditation/

I could get the icon list to align by using 1.6em and -1.6 em in the code above. But that doesn’t take care of the regular bullets.

Thanks,
Kendall

[Kyle – SUPPORT]

If you wanted to apply to normal bullets, you would need to add an extra class on them, and then use

ul.yourclass li {
padding-left: 1.3em;  
text-indent: -0.9em;
}

– Kyle

[QuenchStudio]

Good idea, but it didn’t work – the bullets wouldn’t recognize the extra class name and were still out of alignment.

[Kyle – SUPPORT]

Likely a human error with the setup, can you provide the link with a normal list so I can check?

– Kyle