Problem getting ol li to show in Metro

[Doug]

Hello,

I am having difficulty getting my ol li to show as a numbered list; could anyone shed some light for me?

The url is: http://dev.health-safetysolutions.com/e-learning/

This content in the right sidebar should be in an ordered list:

<div id="Elearning">

1. Go to http://health-safetysolutions.com/360training.com
2. Select a Course Library (Construction, General Industry, Hazardous Waste).
3. Select the desired course by clicking on the check box located next to the course title, and then “add to cart.”
4. Verify the course title and quantity and click on the “checkout and proceed” button.
5. Provide student information on the registration page and click on “information correct proceed with registration.”
6. On the billing page, select method of payment, fill in the appropriate data fields and click on “information correct proceed with registration.”
7. The next page will show a confirmation receipt, with student’s login information.
8. Proceed to take the course.

</div>

Thank you,
Doug

http://dev.health-safetysolutions.com/e-learning/

[David Chu]

Hi,
They're there, but hiding. A little pinch of left margin will bring them in:

.sidebar ol li {
    margin-left: 40px;
}

Adjust to taste. 🙂

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Doug]

Hi Dave

I tried this; but, it's still not working:

#Elearning ol li {
margin-bottom: .5em;
margin-left: 40px;
margin-left: 2.5rem;
}

Am I missing something?

Thank you!
Doug

[David Chu]

Yup, your new code is at a teeny responsive level. You'll want that command at all levels. 🙂

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Doug]

David,

It's still not working...

I have taken away the responsive code and given the ol a class of .entry-content; and, it still won't work:

1. Go to http://health-safetysolutions.com/360training.com
2. Select a Course Library (Construction, General Industry, Hazardous Waste).
3. Select the desired course by clicking on the check box located next to the course title, and then “add to cart.”
4. Verify the course title and quantity and click on the “checkout and proceed” button.
5. Provide student information on the registration page and click on “information correct proceed with registration.”
6. On the billing page, select method of payment, fill in the appropriate data fields and click on “information correct proceed with registration.”
7. The next page will show a confirmation receipt, with student’s login information.
8. Proceed to take the course.

=======

06 Lists
---------------------------------------------------------------------------------------------------- */

.entry-content ol,
.entry-content ul {
margin-bottom: 26px;
margin-bottom: 1.625rem;
}

.entry-content ol li,
.entry-content ul li {
line-height: 1.625;
}

.entry-content ol li,
.entry-content ul li {
margin-left: 40px;
margin-left: 2.5rem;
}

.entry-content ol li {
list-style-type: decimal;
}

.entry-content ul li {
list-style-type: disc;
}

.entry-content ol ol,
.entry-content ul ul {
margin-bottom: 0;
}

/*

====================
Sorry to bother you, Dave; this is really bumming me out.

Doug

[Doug]

Dave,

My mistake: I fixed it:

I needed to code a div with a class of entry-content around the whole ol.

Thank you VERY MUCH for your time and valuable help. I deeply appreciate it!!!

Peace, Doug

[David Chu]

Doug,
Glad you got it sorted!

I don't get asked for OL's that often, but I think they look great.

D

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Doug]

Yeah, Dave

Especially when there are instructions or directions to be followed in a certain sequence.

Namasté,
Doug 🙂

[Author]

Posts