Bullets Not Working On My Site

I am trying to create a CSS style for image bullets (instead of inline) with the following CSS:

/* Remove bullet points and "standarize" list*/
.my-list {list-style:none;display:block;width:auto;overflow:hidden;}

/* add images instead of bullet points */
.my-list li { background:url(https://plantbest.com/thijs-content/uploads/2015/06/plantbest-bullet-15px.gif')
center left no-repeat;

/* change this value to increase/decrease space between text and image */
padding-left:25px;

/* change this value to increase/decrease indent */
margin-left:25px; }

On home page (example)
<ul class="my-list">

  • MerryGro™ stimulates root development
  • Environmentally friendly
  • Stores water and nutrients
  • I have not been able to get it to work, so instead I just tried changing the bullet from default to disc, but it isn't working either.

    Could you please check my website https://plantbest.com and tell me why my custom bullets won't work.

    Support Access is granted.
    Thank you!

    • Wajed

      Hi Mary,

      I hope you are well today.

      I have checked your site and did see that your image bullets are working fine (See the attach). So I suppose that you may have made some changes since you posted here and managed to deal with the issue. If I'm missing anything here, please correct me and provide with some more details on this and I'll be more than happy to assist you!

      You can achieve your desired style with more easier way using list-style-image. For example in your case it will be just one line of CSS.

      .my-list {
          list-style-image: url('https://plantbest.com/thijs-content/uploads/2015/06/plantbest-bullet-15px.gif');
        }

      Here is a working example of bin: https://jsbin.com/gahixarana/edit?html,output

      Hope this helps! Please let me know if you need any further assistance.

      Have a nice day.
      Best regards,
      Wajed

    • Adam Czajczyk

      Hello Mary,

      I visited your site and I noticed that you're actually using

      .my-list

      class name as a selector in your CSS while none of the list on the hompage do use that class. That means that regardless of whether your CSS is proper or not, it's not being applied to the lists.

      The first step was to add it so I did edit your homepage and - using "Text" mode of an editor - I added that class to the first list (the one below "Performance Benefits of PlantBest Coco Fiber Pots").

      Then I found out that there was a "typo" in the CSS: the bullet image URL wasn't enclosed in ' ' (apostrophes). I corrected it too.

      Then I also had to adjust bullet image URL as the URL showing in media library is actually:

      https://plantbest.com/thijs-content/uploads/2015/06/bullet-16x16.jpg

      Finally, as your site is heavily cached, I cleared cache there by:

      - first, going to Hummingibird -> Minification and clicking "re-check" files (no need to make any other changes there)
      - second, purging the WP Rocket cache.

      It seems to be working now for that first list. If you now add "my-list" class to other lists on your site like this:

      <ul class="my-list">

      and clear cache on site, those bullets should show up there as well.

      Best regards,
      Adam

    • Mary

      Thank you Adam. Actually I did have <ul class="my-list"> at one point. Then, as I was looking on the internet to try to solve the problem, I kept changing with the examples given. And re the image, I actually have three bullets on the website, and the one you selected was just uploaded last night (should be in 2017/09/ but it is in the wrong folder. The date of the one you used is from the original folder (2015/06) but that image was 15x15.

      I had also tried with and without quotes.

      Obviously I never tried the right combination so I am very grateful for your help.

      Many, many thanks!!!!