Question

So I’ve scaled featured images using the max-width property but I’m wondering if the same effect can be achieved on nav image icons? Can this be done with image sprites or what would be the recommended method?

Answer 1

You could load a different image size depending on the Media Queries break point.

/* Smartphones (portrait) ----------- */
    @media only screen 
    and (max-width : 320px) {
       #navIcon {
         background-image:url('small.jpg');
       }
    }


/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
   #navIcon {
     background-image:url('normal.jpg');
   }
}