Number Listing Design

[Rohan Verma]

Hi.

I’m already using the numbered listing view in a circular shape. But the circle is quite big in size.

How can I reduce both the circle and 1.2.3. font size in bullet numbering.

Slightly bigger than this: https://prnt.sc/u0ge68

[Leo]

Hi there,

Looks like this is the CSS you are using:

ol li:before {
    margin-right: 6px;
    content: counter(item);
    background: #2018f7;
    border-radius: 100%;
    color: white;
    width: 1.2em;
    line-height: 1.2em;
    padding: 1.5px;
    text-align: center;
    display: inline-block;
}

Have you tried adding the something like font-size: 10px; to it?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rohan Verma]

Thanks. Awesome.

I have created another topic before this one. Kindly help me with that also.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts