Adición de código CSS para implementar diseño responsivo.
Se recomienta leer:  http://www.desarrolloweb.com/articulos/regla-media-css.html
Fuente: http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=CSS3MediaQueries

Este código a añadir establecerá las directivas de diseño según el tamaño de la pantalla, y los siguientes fragmentos se refieren a algunos de los tamaños de pantalla más utilizados hasta la fecha.

/* Para las resoluciones más pequeñas */
@media only screen and (max-width: 340px) and (min-width: 5px) {
/*reglas css*/
}

/* Para 480px */
@media only screen and (max-width: 500px) and (min-width: 341px) {
/*reglas css*/
}

/* Para 600px */
@media only screen and (max-width: 620px) and (min-width: 501px) {
}

/* Para 800px */
@media only screen and (max-width: 820px) and (min-width: 621px) {
/*reglas css*/
}

/* Para 960px */
@media only screen and (max-width: 980px) and (min-width: 821px) {
/*reglas css*/
}

/* Para mínimo 980px */
@media only screen and (min-width: 981px) {
}

Aquí tenemos otro conjunto de reglas como muestra de cómo podemos mostrar contenido personalizado en distintas resoluciones gracias a CSS:

/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ———– */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ———– */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ———– */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ———– */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ———– */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ———– */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Y por último, según la anchura del dispositivo, no de la pantalla:

// Para iPad
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* Aquí van los estilos */}
// Para iPad con pantalla retina
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* Aquí van los estilos */}
// Para iPad mini
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) { /* Aquí van los estilos */}
// Para iPhone 5 o superior
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) { /* Aquí van los estilos */}