1. Mol4
  2. Sherlock Holmes The Voice
  3. Commercial Templates
  4. Friday, 11 November 2022
  5.  Subscribe via email
Hello,

this is not a question but something I figured out myself :-) haha.
Maybe there is a more simple solution but with al the work I had and trying I've done this might be something for others.

The 'thing' I had was when using the ul.star on an unorderd list to get the little star-images in front of the list, on mobile the stars where centered at the list-text. I couldn't get the stars aligned on the first sentence.
So I decided to fix this.
But really it isn't a fix because I removed the original stars and made some new stars with the use of an unicode symbol.
Here is the CSS I added tot the custom CSS.
It worked for me :-)

/* to align the bullet-stars at the first sentence of list-item on mobile */
ul.star li {
background: none;
}
ul {
list-style: none; /* Remove default bullets */
}
ul li::before {
content: "\2605"; /* Add content: \2605 is the CSS Code/unicode for a star*/
text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
color: gold; /* Change the color */
font-weight: bold; /* If you want it to be bold */
font-size: 20px;
display: inline-block; /* Needed to add space between the bullet and the text */
width: 1.2em; /* Also needed for space (tweak if needed) */
margin-left: -1em; /* Also needed for space (tweak if needed) */
}
/* END to align the bullet-stars at the first sentence of list-item on mobile */
Accepted Answer Pending Moderation
0
Votes
Undo
Very nice! :)

I just tested your CSS and it works like a charm. Thank you for sharing!

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!