How to remove bullets from ul?

Question

I've read multiple topics with this same question and tried following all instructions but I can't seem to remove the bullets from the following <ul> <li> segment.

<div id="mobile-contact-bar-outer">
<ul>
<li><a data-rel="external" href="tel:+18885551212"><span class="fa-stack fa-3x"><i class="fa-fw fas fa-phone"></i>
<span class="screen-reader-text">Phone Number for calling</span></span></a></li>
<li><a data-rel="external" href="mailto:name@email.com"><span class="fa-stack fa-3x"><i class="fa-fw far fa-envelope"></i><span class="screen-reader-text">Email Address</span></span></a></li>
</ul>
</div>

I've added both:

div#mobile-contact-bar-outer {
    list-style-type: none!important;
}

div#mobile-contact-bar {
    list-style-type: none!important;
}

Neither have any effect. What am I missing? No caching on site.

score 1 · Answer 1 · answered Jun 06 '19 at 22:40

1

Add list-style: none to the UL tag. MDN reference

ul {
    list-style: none
}

answered Jun 06 '19 at 22:40

ggdx

3,024
4
32
48

score 0 · Answer 2 · answered Jun 06 '19 at 22:41

0

The following does it, you have to edit the ul tag directly as list-style-type isn't valid on divs

div#mobile-contact-bar-outer ul {
  list-style-type: none;
}

div#mobile-contact-bar ul{
  list-style-type: none;
}

<div id="mobile-contact-bar-outer">
  <ul>
    <li><a data-rel="external" href="tel:+18885551212"><span class="fa-stack fa-3x"><i class="fa-fw fas fa-phone"></i>
<span class="screen-reader-text">Phone Number for calling</span></span></a></li>
    <li><a data-rel="external" href="mailto:name@email.com"><span class="fa-stack fa-3x"><i class="fa-fw far fa-envelope"></i><span class="screen-reader-text">Email Address</span></span></a></li>
  </ul>
</div>

answered Jun 06 '19 at 22:41

Zachary Raineri

148
1
12

Added 'div#mobile-contact-bar-outer ul { list-style-type: none; } div#mobile-contact-bar ul { list-style-type: none; }' but no change. Still have bullets! – darkmatter661 Jun 06 '19 at 23:27
Do you have any other styles affecting the ul tags? If you click "Run code snippet" you can see no bullets show for your code with just these snippets, that means something else must be affect it – Zachary Raineri Jun 06 '19 at 23:41
There could be, but adding !important should eliminate that possibility right? There are no other calls in the native tags for any styles. Since this is called only on mobile, perhaps I should be adding '@media screen'? – darkmatter661 Jun 06 '19 at 23:46
Yeah !important should unless you also use important elsewhere that affects it. If you inspect the element in dev-tools what styles show on the ul tag? Media queries wont override the !important tag, they just get added to the cascade on applicable devices/sizes – Zachary Raineri Jun 06 '19 at 23:52
This is all that's applied to ul. border: 0; font-size: 100%; vertical-align: baseline; background: transparent; font-weight: normal; margin: 0; padding: 0; – darkmatter661 Jun 07 '19 at 20:08

score 0 · Answer 3 · answered Jun 06 '19 at 22:42

you can either add a class to your element like

<ul class="newclass">

and add you list-style-type: none to that element like

ul.newclass{
list-style-type: none
}

this new class will allow more control to this individual ul element

or add the class to your div

div#mobile-contact-bar-outer ul{
    list-style-type: none;
}

no need for the important tag now.

How to remove bullets from ul?

3 Answers3