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!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok