Para hacer un sitio responsive se utilizan las
Media Queries de CSS. Consiste en adaptar la apariencia del sitio según el ancho del dispositivo. Con las media queries podes cambiar cualquier atributo que ya hayas asignado anteriormente a un elemento para que se aplique según el ancho de la ventana.
Un ejemplo fácil para tu caso, siendo que tu sitio es de 600px de ancho, supongamos que querés que en móviles en vertical ocupe todo el ancho del dispositivo..
Teniendo como referencia ésta imagen:
Lo que deberías hacer sería lo siguiente:
Código CSS:
Ver original.contenedor{
width:600px;
margin:0 auto;
}
@media screen and (max-width:320px){
.contenedor{
width:100%;
}
}
Es decir, indicamos que sólo cuando el ancho del navegador sea menor a 320px, el contenedor ocupe el 100%.
Para hacer sitios responsive se utilizan mucho los porcentajes en el atributo
width.. Por ejemplo, en tu caso lo que yo haría seria indicarle al contenedor que tenga un ancho de 90% y ancho maximo de 600px.. Así si el dispositivo mide menos de 600px, el contenedor va a ocupar siempre el 90% de la ventana, en cambio si mide mas de 600px, el contenedor siempre va a ocupar 600px porque le asignamos un tamaño máximo.
Código CSS:
Ver original.contenedor{
width:90%;
max-width:600px;
margin:0 auto;
}
Solo con eso ya tendrías tu .contenedor responsive, ahora te queda acomodar el resto de tus elementos según creas necesario.
Saludos!
PD: Esto es una guia Ultra Hiper Archi Mega Resumida, para que más o menos entiendas en qué consiste y cómo se aplica.. lo recomendable es que busques en google guías más completas sobre diseño responsive y media queries..
