Blog Bullet and Numbered Lists Aren't Formatting Correctly

Support
#1

On this website page bullet and numbered lists ARE styled correctly. - See correct formatting.

However, on blog posts such as this the lists aren’t formatted properly - See unformatted lists.

Thanks for the help!

Jeremy

#2

Hi Jeremy,

Thank you for writing in, it’s different because the lists here is inside a Text element which is styled properly, while here it’s hard coded.

To resolve that, let’s add a CLASS to your <ul> tag.

e.g.

<ul class="myunorder-list">
	<li></li>
	<li></li>
	<li></li>
</ul>

And then style it using that CLASS. Add this custom CSS to Theme Options > CSS

.myunorder-list {
	max-width: 700px;
    margin-left: auto;
    margin-right: auto;
	font-size: 18px;
	line-height: 1.6;
}

Hope it helps,
Cheers!

#3

Sorry, the hard coded UL was because I tried to get around the issue, the styling issue also happens on UL’s that are not hard coded - http://bonfiretraining.com/have-your-employees-lost-that-lovin-feelin/.

Thanks for the assistance!

Jeremy

#4

Hello Jeremy,

Please find this block of code:

.single-post .entry-content.content p, .single-post .entry-content.content h1, .single-post .entry-content.content h2, .single-post .entry-content.content h3, .single-post .entry-content.content h4, .single-post .entry-content.content h5, .single-post .entry-content.content h6 {
    width: 80%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

then update it to:


.single-post .entry-content.content p, .single-post .entry-content.content h1, .single-post .entry-content.content h2, .single-post .entry-content.content h3, .single-post .entry-content.content h4, .single-post .entry-content.content h5, .single-post .entry-content.content h6, .single-post .entry-content.content ol, .single-post .entry-content.content ul {
    width: 80%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

Hope this helps.

#5

Thanks so much! You gave me the extra step I needed.

Here’s the final fix for those interested.


.single-post .entry-content.content ol, .single-post .entry-content.content ul {
    width: 80%;
    font-size: 16.5px;
    Padding: 0em 0em 0em 2.5em;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

All the best,

Jeremy

#6

Hello Jeremy,

Thanks for sharing the solution. You may also check these links on how to check for CSS selectors:

Hope this helps.

#7

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