Day 7

<nav id=”footer-menu”><ul><li><a>…..

If you need to add  | as a separator for your nav, you may use this:

#footer-menu li:before{
content:   “|”;
padding: 0 10px;
}

Then to avoid the separator on the first child of li, do this

#footer-menu li:first-child:before{
content: “”;
}

For HTML5 BOILERPLATE, when modifying nav, make sure to 0 the padding if you don’t want any text-indent

nav ul{
padding:0;
}

The first step to creating our responsive layouts is to plan out what resolutions we’re going to cater for. Common resolutions include the 320px portrait width of smartphones, 768px portrait width of tablets, 1024px landscape width of tablets (and typical netbook resolutions) as well as various desktop monitor resolutions. It’s worth mentioning that a layout that only caters for preset resolutions is often referred to as being ‘adaptive’, whereas a truly ‘responsive’ layout will be built using ems or percentages, allowing an infinite level of scaling.
Source: http://line25.com/tutorials/create-a-responsive-web-design-with-media-queries