Converting to the EM Camp

During my perilous adventures in responsive development, I spend way too much time tweaking percent values for various elements so they fit nicely on a particular device screen. I've found that setting everything to use a percent value can cause the interface to look nice on one device but blow up on another. So, I started reading up on using another type of measurement for device sizes - the EM.

1 em is equal to the font-size of the targeted element. 16px is the default if no font-size is specific in the document. Using ems instead of percents in upper levels of the document tree has helped my interfaces look more consistent between devices.

Here's a good article on using the em measurement:
http://www.impressivewebs.com/understanding-em-units-css/

Invisible Bullet Points Problem

I had an unordered list that had pesky bullets that would not display. The list was set to "display: block;" so why wasn't it showing up within its parent element? I tried fiddling with the "display" CSS setting of the ul element and its list items but no luck. I started searching for CSS attributes specific to li elements and found the list-style-position CSS attribute.

When I set this attribute to list-style-position: inside, the bullet points showed up nicely within the document. Setting "inside" ensures that the list items flow within the parent element, so no bullet points are hidden.

Here is a reference to this attribute from MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position