Support » Theme: Twenty Twenty-One » unordered list not vertical, not showing bullets

  • Resolved keithwillenson

    (@keithwillenson)


    There are two sections. The first is hardcoded html which is what I want the info to look like. The second is an unordered list which is not displaying correctly.

    I have cleared the cache.

    I have custom css which is not doing what I want

    .woocommerce-Tabs-panel--description > ul {
    	padding-left: 20px;
    	padding: 1em;
    	margin: 1em;
    	 flex-direction: column;
    }
    
    .woocommerce-Tabs-panel--description > ul > li {
        list-style-type: circle;
    	 flex-direction: column;
    }

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hi,

    This should do what you are looking for …

    .woocommerce-tabs ul li {
    display: list-item;
    }

    Oliver

    Thread Starter keithwillenson

    (@keithwillenson)

    Thanks very much. I tried that or something similar before posting this question. The custom css you suggested has now been added to my site. Further investigation shows that the theme twenty twenty-one 5.7.1:1 overrides list-item with

    woocommerce-tabs ul li {
        display: inline-flex!important;
    }
    Oliver Campion

    (@domainsupport)

    I see, actually that’s not from the theme, that’s from WooCommerce which detects the theme and injects its own CSS file …

    /plugins/woocommerce/assets/css/twenty-twenty-one.css

    You can override their !important with this …

    .woocommerce-tabs ul li {
    display: list-item !important;
    }

    Usually we’d never recommend the use of !important but unfortunately, in this instance, it’s the only way.

    Oliver

    Thread Starter keithwillenson

    (@keithwillenson)

    Thanks! That worked perfectly, although I used

    .woocommerce-Tabs-panel--description ul li {
    display: list-item !important;
    }

    That’ll work too. Not sure why WooCommerce uses !important like this!

    Oliver

    Thread Starter keithwillenson

    (@keithwillenson)

    Do you know which version of css !important was introduced? I have not encountered it before. Mostly my css experience was concerning WordPress/Woocommerce. However, this is the first time I have explicitly used ul in a product description.

    As you obviously know, but I did not, according to the docs, !important can only be overridden by another !important. It can not be turned off. Also, using !important can lead to confusing css so it should be avoided if possible.

    Well, I’ve always known !important to exist … but the reason it should only be used if absolutely necessary (like in this situation) is that once it’s been used, it can only override itself and breaks the way CSS was designed to work!

    Oliver

    Thread Starter keithwillenson

    (@keithwillenson)

    Yup. I editted my response so future searchers can get that info, but you said it more clearly. Thanks again.

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.