-1

I created a bullet list that has a different color for bullet and text. It worked fine until someone called and said it was off in Chrome and Edge, but it looked perfectly fine in Firefox that I was working on. The problem is when the bullet has more than one line, the first line gets pushed further in and isn't inline with the bottom text, but this only happens in Chrome and Edge.

ul.bt-bullet {
  margin-left: 0px;
}

ul.bt-bullet li {
  list-style-position: inside;
  text-indent: -1.4em;
  padding-left: 1.4em;
  padding-bottom: 10px;
  font-size: 25px;
  line-height: 25px;
  color: #F18D21 !important;
}

ul.bt-bullet li span {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  margin-left: 10px;
  color: #000000;
}
<ul class="bt-bullet">
  <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
  <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
  <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
</ul>
halfer
  • 19,824
  • 17
  • 99
  • 186
Kenneth K
  • 7
  • 1
  • 3
    Please read [ask], especially the section titled "Write a title that summarizes the problem". – Heretic Monkey Dec 23 '22 at 21:47
  • Questions that ask "please help me" tend to be looking for highly localized guidance, or in some cases, ongoing or private assistance, which is not suited to our Q&A format. It is also rather vague, and is better replaced with a more specific question. Please read [Why is "Can someone help me?" not an actual question?](//meta.stackoverflow.com/q/284236). – halfer Dec 30 '22 at 23:42

2 Answers2

1

The problem was with the margin-left: 10px; line.

Remove it and you will see this result:

ul.bt-bullet {
    margin-left: 0px;
}
ul.bt-bullet li {
    list-style-position: outside;
    padding-left: 1.4em;
    padding-bottom: 10px;
    font-size: 25px;
    line-height: 25px;
    color: #F18D21 !important;
}
ul.bt-bullet li span {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    color: #000000;
}
<ul class="bt-bullet">
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
</ul>
Tamir Abutbul
  • 7,301
  • 7
  • 25
  • 53
0

Hope this helps, commmented few lines in the CSS code. Kindly notice that.

ul.bt-bullet {
    margin-left: 0px;
}
ul.bt-bullet li {
    list-style-position: outside !important;
/*     text-indent: -1.4em; */
    padding-left: 10px;
    padding-bottom: 10px;
    font-size: 25px;
    line-height: 25px;
    color: #F18D21 !important;
}
ul.bt-bullet li span {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
 /*   margin-left: 10px; */
    color: #000000;
}
<ul class="bt-bullet">
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
</ul>
Anubhav Munjaal
  • 72
  • 4