Review of my CSS for aligning the navigation icons and text in a footer menu The navigation in my footer menu looks like this 



It works, but I get a feeling that using spans the way I did was a bit of a hack. So I would also like to know how to maximize compatibility as used media queries.

I created it using the following 

HTML

&lt;div class="footer"&gt;
    &lt;ul&gt;

      &lt;li&gt;&lt;a href="http://www.bruxzir.com"&gt;
        &lt;span&gt;HOME&lt;/span&gt;&lt;span&gt;&amp;raquo;&lt;/span&gt;
      &lt;/a&gt;&lt;/li&gt;

      &lt;li&gt;&lt;a href="http://www.bruxzir.com/features-bruxzir-zirconia-dental-crown/"&gt;
        &lt;span&gt;FEATURES&lt;/span&gt;&lt;span&gt;&amp;raquo;&lt;/span&gt;
      &lt;/a&gt;&lt;/li&gt;

      &lt;li&gt;&lt;a href="http://www.bruxzir.com/video-bruxzir-zirconia-dental-crown/index.aspx"&gt;
        &lt;span&gt;VIDEOS&lt;/span&gt;&lt;span&gt;&amp;raquo;&lt;/span&gt;
      &lt;/a&gt;&lt;/li&gt;

      &lt;li&gt;&lt;a href="http://www.bruxzir.com/cases-bruxzir-zirconia-dental-crown/"&gt;
        &lt;span&gt;CASES&lt;/span&gt;&lt;span&gt;&amp;raquo;&lt;/span&gt;
      &lt;/a&gt;&lt;/li&gt;

      &lt;li&gt;&lt;a href="http://www.bruxzir.com/testimonials-bruxzir-zirconia-dental-crown/"&gt;
        &lt;span&gt;TESTIMONIALS&lt;/span&gt;&lt;span&gt;&amp;raquo;&lt;/span&gt;
      &lt;/a&gt;&lt;/li&gt;

      &lt;li&gt;&lt;a href="/"&gt;
        &lt;span&gt;BLOG&lt;/span&gt;&lt;span&gt;&amp;raquo;&lt;/span&gt;
      &lt;/a&gt;&lt;/li&gt;

      &lt;li&gt;&lt;a href="http://www.bruxzir.com/authorized-bruxzir-labs-zirconia-dental-crown/"&gt;
        &lt;span&gt;AUTHORIZED BRUXZIR LABS&lt;/span&gt;&lt;span&gt;&amp;raquo;&lt;/span&gt;
      &lt;/a&gt;&lt;/li&gt;

    &lt;/ul&gt;
&lt;/div&gt;


CSS

.footer {
  background-color: #111; 
  text-align: center;
  width: 100%;
  min-height: 120px;
  padding: 24px 0; 
}

.footer a { 
  color: #fff;
  text-decoration: none; 
}

.footer ul { list-style: none; }

@media only screen and (min-width: 1px) and (max-width: 479px) { 
  .footer { text-align: left; }
  .footer ul li { 
    display: block; 
    padding: 12px; 
  }
  .footer ul li a { } 
  .footer ul li a span:nth-of-type(2) {
    padding:9px;
    background-color: rgb(202, 0,0 );
    float: right;
    border-radius:2px;
  }
}  

@media only screen and (min-width: 480px) { 
  .footer { text-align: center; }
  .footer ul li { display: inline; }
  .footer ul li:not(:last-of-type) { margin-right: 12px }
  .footer ul li a span:nth-of-type(2) { display: none; }
}
HTML:


Since the the navigation is the only thing inside your &lt;div class="footer"&gt;, how about moving the class to the ul?
Instead of using span's there, you can add the &amp;raquo; to a pseudo-element (see the CSS part)


CSS:


For your arrows, you should use pseudo-elements:

.footer a:after {
    content: "\00BB";
    float: right;
    padding: 9px;
    border-radius: 2px;
    background-color: #ca0000; /* hex-based values are shorter */
}


You won't need to hide them on bigger screens either, if you define them inside a media query, because they're not present in your markup
Instead of actually writing the links in capital letters, write them like you would in normal language and make them appear uppercase with text-transform: uppercase;
I don't see a purpose for the min-width: 1px part in your media query. Just unnecessary.
Defining display: block; on list-items is not necessary, because they behave like block-level elements already
Select .footer li instead of .footer ul li and .footer a instead of .footer ul li a. No need for this extra layer of specificity and dependency. There will probably no other links and list-items in this ul other than these you already have