: Small Ellipse coming out pixelleted on mobile I am trying to save an ellipse, it's really small. 5px by 5px. I save it as PNG-24 but on mobile the ellipse is showing pixeleted. I've tried

@Berryessa866

The problem is that you are viewing the image on a high pixel density screen which - as the name suggests - has a higher pixel density than normal. So what you think is a 5px x 5px image is actually rendering in an area that is 10px x 10px (or 15px x 15px) - hence the pixelation.

Normally you would create different sized assets for different pixel densities - usually x1, x3 and x3. But this won't work with list-style-type: 'image'; as none of the usual CSS workarounds will work with it.

You have a few options to get around this.

CSS with Images

Instead of using list-style-type: 'image'; use a background image on the li and set the list-style-type to none. You can then use the background-size property and a larger image to compensate for the high pixel density display.

ul {
list-style:none;
}

ul li {
background:url('bullet10px.png') no-repeat left;
background-size:5px 5px;
}


CSS without images

You can use the :before selector to create a pseudo-element and set its content to a bullet. You can then change the color or positioning of that element however you want.

ul {
list-style: none;
}

li {
padding-left: 1em;
text-indent: -.7em;
}

li:before {
content: "•";
color: red; /* or whatever color you prefer */
}


Font Icons

Another option may be to use an icon font. I use Font Awesome but there are plenty of alternatives.

From the font awesome examples:

<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

Vote Up Vote Down