[Support request] Bulleted list problem

[keri]

Hi, I create important website and I have big problem with space between bulleted list (every list is too close) as you can see on test url. Also problem is with “open” square under first and next under list – it should be roundel.

Important is that in Gutenberg everything is OK and looks good – I use Classic block.
In GPP Customize there is no settings for bulleted list but I think it should be.

Please help.

[David]

Hi there,

i am seeing a round bullet point on your list, can you clear your browser cache and double check?
If you want to add some space between list items you can add some bottom margin like so:

.inside-article ul li, .inside-article ul {
    margin-bottom: 0.5em;
}

Controlling the bulleted list from the customizer would be complicated as unordered lists are used in other areas such as widgets and menus. We are looking at some Block level styling in the future though.

[keri]

i am seeing a round bullet point on your list, can you clear your browser cache and double check?

It is really strange because I clear cache and also change browser even computer and still seeing only one big black dot (not empty inside).. But in Gutenberg editor in dashboard is OK, don’t know what is wrong..

I used code to space and now is better but there is no space beetween List 2 and List 2-1, please look again to url test. How can I fix it? But in Gutenberg is very good..

[David]

I edited the code above to include the UL. So sub lists should now be spaced.

Can you send me an screenshot of how it looks in Gutenberg?

[keri]

Sorry I was really busy, screenshot /gblist.jpg

Better is .inside-article ul li {margin-bottom: 0.5em;} because don’t add additional space on the top.

On mobile phone will be good to can change space on the left of lists to use the entire width of small screen. It could be to change in Customizer only for .inside-article

[keri]

How can I reduce the indentation on the left of UL, OL, (LI) but only for mobile?

[David]

Something like this:

@media (max-width: 767px) {
    .entry-content li>ul {
        margin-left: 0.5em !important;
    }
}

[keri]

Thank you but it doesn’t work and also .entry-content works only for home page not sub pages.

I changed for
`@media (max-width: 767px) {
.inside-article ul {
margin-left: 1.3em !important;
}
}`
and it works but I’m not programmer and not sure if this is good or conflict with theme.

[David]

the CSS looks correct and nope if its working then no conflicts 🙂 it only effects the inside article – so the rest of theme will be untouched.

[keri]

Ok, thank you very much for help! 🙂

[David]

You’re welcome

[Author]

Posts