Styling on the "list" block

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know :)

Thanks, I have attached a link on the original topic

Hi there,

this topic i provide some CSS for numbered lists:

https://generatepress.com/forums/topic/numbered-list-styling/#post-846745

Thanks working like a charm, wondering what is the code for dot points?

What style are you looking for ?

The unordered one, please
https://squaretypetheme.com/squaretype/blocks/styled-lists/#unordered

Try this:

.entry-content ul {
    list-style: none;
    margin-left: 0;
}

.entry-content ul li:before {
    content: '';
    display: inline-block;
    position: relative;
    width: 5px;
    height: 5px;
    margin: 0 15px 0 25px;
    top: -5px;
    border-radius: 10px;
    background-color: #ccc;
}

Legend, it works. Thank you very much David, Have a good one.

You're welcome

Hi,
I have discovered the last code that was supplied, is conflicting with "social links" from Gutenberg.

Link: https://www.acehsc.net/become-moderator/

Try this:

.entry-content ul:not([class^="wp"]) {
    list-style: none;
    margin-left: 0;
}

.entry-content ul:not([class^="wp"]) li:before {
    content: '';
    display: inline-block;
    position: relative;
    width: 5px;
    height: 5px;
    margin: 0 15px 0 25px;
    top: -5px;
    border-radius: 10px;
    background-color: #ccc;
}

Thanks, it works. Have another issue with the alignment, could I get it resolved.

----
https://ibb.co/km6vqDG
https://www.acehsc.net/how-to-take-effective-study-notes/
----
https://ibb.co/w0Hc1yG
https://www.acehsc.net/become-moderator/
-----

Try these instead:

ol {
    list-style: none !important;
    counter-reset: item;
}

ol li {
    counter-increment: item;
    margin-bottom: 5px;
    position: relative;
}

ol li:before {
    content: counter(item);
    display: inline-block;
    position: absolute;
    left: -2em;
    width: 1.2em;
    line-height: 1.2em;
    padding: 2px;
    background-color: #bbb;
    border-radius: 100%;
    color: white;
    text-align: center;
}

.entry-content ul {
    list-style: none;
}

.entry-content ul:not([class^="wp"]) li {
    position: relative;
}

.entry-content ul:not([class^="wp"]) li:before {
    content: '';
    display: inline-block;
    position: absolute;
    left: -1.5em;
    top: 0.5em;
    width: 0.25em;
    height: 0.25em;
    border-radius: 10px;
    background-color: #ccc;
}

much better, but there are small circle dots near social media button links