Ahora que sabes cómo usar
la meta para el viewport
juguemos un poco
con las herramientas de desarrollo
para ver qué necesitamos hacer
para arreglar esta página.
Ahora bien, el mayor problema
aquí es que la página
tiene un ancho de columna fijo.
Si yo reajusto el tamaño de la ventana,
notarás que la columna de texto
no cambia de tamaño,
solo cambia su posición con respecto al margen.
Al mirar los elementos
en la herramientas de desarrollo, podemos
encontrar fácilmente el primer elemento ofensivo.
Este elemento de la página
tiene un ancho de página fijo.
Inhabilitémoslo y veamos qué pasa.
Bueno, ciertamente ha cambiado
las cosas, pero no creo que
haya mejorado mucho el asunto.
Sigamos investigando
el contenido para ver qué encontramos.
Este elemento de wrapper ya tiene
un ancho del 100%, lo cual es bueno.
Significa que no nos está impidiendo
reajustar el tamaño. Pero el elemento
de contenido tiene un ancho fijo en píxels.
Inhabilitémoslo. Ahora,
al reajustar el tamaño
de la página, nuestro contenido no tiene
problema, pero la barra lateral
aparece y desaparece.
Desde luego, tiene un ancho fijo.
Si ajustamos su ancho a
un porcentaje también,
ahora podemos reajustar
el tamaño de mejor forma.
Volvamos a la página, e intentemos
asignarle un ancho, pero
démosle un ancho en
unidades viewport esta vez.
Nuestro único problema ahora
parece ser que el encabezado
no está reajustándose como
quisiéramos, así que echémosle
un vistazo a la imagen del encabezado
una vez más. La imagen tiene
un ancho máximo asignado,
pero no un ancho en sí.
Así que, fijemos su ancho.
Y ahora, todo parece estar
reajustándose bien. No es perfecto,
pero todo lo que quería explicar
es que al intentar transicionar
páginas con diseño fijo a diseño fluido,
las cosas básicas a las que hay que
prestar atención, son los tamaños de píxeles
fijos, y a la falta de reajuste con porcentajes.