Comenzamos jugando con nuestro módulo de publicación de blog, jugueteando con el espacio. También agregamos el pequeño cuadrado de color en la parte superior izquierda del módulo, un significante visual del tipo de contenido que es.
El siguiente cambio que hacemos es reducir algunos de los huecos exteriores en tamaños de pantalla más estrechos. En pantallas anchas, el contenido tiene un 80% de ancho (10% de bordes de ancho) pero se siente mejor ir más como un 90% en pantallas más pequeñas (5% de bordes de ancho).
Agregamos una pequeña transición para cuando llegue esa consulta de medios, lo que puede ser un truco de diseñador realmente divertido. Me gusta en este video, pero finalmente esto se eliminó del diseño. Puede ser entrecortado cuando hay mucho más contenido en la página y distrae bastante.
Alteramos nuestro sistema de cuadrícula para tener un punto de interrupción en el tamaño más pequeño. Es muy fácil, simplemente dejamos de hacer flotar las columnas y las hacemos ¡ width: 100%;Yay por no pensar demasiado en las cuadrículas! Luchamos contra algunos problemas de especificidad en el camino.
Abrimos el simulador de iOS real para ver cómo funciona la cuadrícula en un dispositivo móvil "real". Luchamos un poco para encontrar la metaetiqueta adecuada, pero finalmente conseguimos la correcta en CSS-Tricks.com. ¡Funciona! Pero, por supuesto, tenemos algunos problemas de posicionamiento que tendremos que resolver. Para el registro, esa metaetiqueta es:
Jugamos, jugamos, jugamos con el espaciado y el tamaño hasta que todo se vea bien. ¡Las cosas se ven bastante bien al final!