I’m using WordPress and I don’t like the format of how ordered list HTML tags present itself.
The list appears as a paragraph in the heading tags (H1, H2, H3, H4…)
How can I correct it (probably using CSS) to make it the same font size?
Can we see some relevant code, html and css?
Post it here or a link to the live page.
Actually, I don’t have some code for this. I’m formatting it using WP. When I post it, it appears as shown from the above screenshot. So I’d like to have a code to add to my CSS to make it presentable.
Thanks.
You should be able to get the html if you “view source” in the browser. The css will be in a css file(s) somewhere.
It doesn’t need to be all of it, just the relevant part.
1 Like
Yes, that is an unusual list structure, not at all what I expected.
Does this section have a container element, probably with a class applied?
Ideally you would want to fix that list structure to something more sensible, but I guess that probably depends on your theme.
Yes, it has a div class <div class="startright-entry-content">. How can I go about it?
This screenshot shows the beginning of the section class
I don’t know anything about wordpress but if you can add the following css somewhere after the original (probably in your custom css file) then if the structure is as you say it should over-ride the default behaviour.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.startright-entry-content {
counter-reset: section;
}
.startright-entry-content ol {
list-style:none;
margin:0;
padding:0;
}
.startright-entry-content ol h3 {
font-size:2rem;
color:green;
margin:0;
}
.startright-entry-content ol h3::before {
counter-increment: section;
content: counter(section) ".";
color:inherit;
font-size:inherit;
display:inline-block;
width:1.3em;
/*or remove width and add a margin-right if you don;t want a specific gap*/
}
</style>
</head>
<body>
<div class="startright-entry-content">
<ol start="1">
<li>
<h3>This is a heading</h3>
</li>
</ol>
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
<ol start="2">
<li>
<h3>This is a heading</h3>
</li>
</ol>
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
<ol>
<li>
<h3>This is a heading</h3>
</li>
</ol>
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
<ol>
<li>
<h3>This is a heading</h3>
</li>
</ol>
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
<ol>
<li>
<h3>This is a heading</h3>
</li>
</ol>
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
<ol>
<li>
<h3>This is a heading</h3>
</li>
</ol>
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
<ol>
<li>
<h3>This is a heading</h3>
</li>
</ol>
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
<ol>
<li>
<h3>This is a heading</h3>
</li>
</ol>
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
<ol>
<li>
<h3>This is a heading</h3>
</li>
</ol>
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
<ol>
<li>
<h3>This is a heading</h3>
</li>
</ol>
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
</div>
</body>
</html>
Sam may have a better suggestion though as I don’t use wordpress 
Thank you @PaulOB your code solve my problem perfectly…Thank you.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.