Custom list image not showing up

[pchartier]

I want to have custom bullets on ONE set of bulleted items, but my bullet image isn’t showing up. Thanks for any help!

This is my CSS code:

.fleurdelisbullets{

 margin-left: 1rem;

font-size: 18px;

color: #838175;

list-style-position: outside;

list-style-image: url(../images/fleurDeLis18pt.png);

padding-left: 2rem;

}

.fleurdelisbullets li {

padding-left: 2rem;

background-size: 0;

}

This is the source code:

 <div class="fleurdelisbullets">

   <ul>

<li>Ro veleste iunt etur autemol oreperiae nus re ipsus re ent et illa aditi velicab is doloreperum</li>

<li>Ro veleste iunt etur autemol oreperiae nus re ipsus re ent et illa aditi velicab is doloreperum</li>

<li>Ro veleste iunt etur autemol oreperiae nus re ipsus re ent et illa aditi velicab is doloreperum.</li>

<li>Ro veleste iunt etur autemol oreperiae nus re ipsus re ent et illa aditi velicab is doloreperum</li>

   </ul>

</div>

[Ben M]

Can we see the page online to verify the image and path are correct?

[pchartier]

Here you go: http://www.paulitachartier.com/NHCC_2023/

I know, I know, this is a work in progress, and there are several kinks I need to work out. BUT, the culprit is towards the bottom of the page, entitled “What Can You Expect?” Those blank spaces are supposed to be bullets.

[Ben M · Accepted solution]

Thank you for sharing. On line 177 of your style.css file you have a conflicting piece of code that is causing it not to show. Because this is setting the ul, li general list style to none, it is overriding your image. As soon as that is cleared your custom image shows.

ul,li{
list-style:none;
padding:0px;
margin:0px;
}

[osgood_ · Accepted solution]

You might try and apply the custom bullet to the li tags.  At the moment, according to the css posted, you are applying it to the div which contains the li tags.

[pchartier]

OMG both suggestions worked. I now have little fleur de lis bullets! Thank you both.

[Nancy OShea]

Also, on my display, the left column is flush left.  It needs more space between content and browser frame. 

Since you're using Bootstrap, pay close attention to the Container > Row > Col construct.  That will provide you with ample padding on all devices.

Hope that helps.

[pchartier]

Thank you, Nancy. That happens to be what I was trying to figure out right now, and it wasn't going well!

[Nancy OShea · Accepted solution]

Bootstrap 4 Reference:

https://www.w3schools.com/bootstrap4/

https://getbootstrap.com/docs/4.6/getting-started/introduction/

<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-6">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-6">
<h3>Column 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>

[pchartier]

Thank you so much for helping me out.

[pchartier]

I just plugged in the code. It is perfect!

[BenPleysier]

This discussion in another Community will gove you some insight of why this is happening.

[pchartier]

This explains a lot. Thank you!