Return to Revisions

HTML:

• Since the the navigation is the only thing inside your <div class="footer">, how about moving the class to the ul?
• Instead of using span's there, you can add the » to a pseudo-element (see the CSS part)

CSS:

• For your arrows, 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

• 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