En la clase de hoy vamos a hacer nuestro Genesis child theme responsive. Veremos cómo sólo necesitamos CSS y un poco de imaginación y media queries.
10 – Hacer un theme responsive
Finalmente, llegamos al último punto de cualquier style.css. Las media queries. Veremos cómo se organizan, porque deben ir al final, y cómo hacer que los elementos que hemos incorporado sean reponsive. O sea, adaptables a varios tamaños de pantalla.
Como podéis ver, no hay una gran dificultad en este punto. Sólo debemos ir elemento a elemento modificando los CSS correspondientes a ese tamaño de pantalla. Yo os recomiendo hacerlo con el método de copiar y pegar que he usado en el vídeo.
Así pues, los deberes del día:
- Eliminar el CSS sobrante de media queries.
- Tocar los atributos de CSS en iPhone 6 para ver como cambia todo a tiempo real.
- Hacer responsive nuestro widget de bienvenida y de CTA
- Modificar los margenes acorde
Y hasta aquí la lección de hoy, y de hecho, el curso. Como siempre, para cualquier duda podéis contactar a través de la Intranet.
Para el próximo curso de Genesis, estoy abierto a ideas. Algunos me habéis pedido un curso de Child Themes para WooCommerce. Otros un curso sólo de webs responsive. Si ese es uno de los casos, o tenéis otra idea, aquí la espero :)
Nos vemos en la próxima clase, sea del curso que sea. ¡Hasta entonces!
Todos los capítulos de este curso:
- Curso de Genesis Child Themes #1: Crear un child theme
- Curso de Genesis Child Themes #2: functions.php
- Curso de Genesis Child Themes #3: front-page.php
- Curso de Genesis Child Themes #4: home.php
- Curso de Genesis Child Themes #5: CSS
- Curso de Genesis Child Themes #6: Creando estilo
- Curso de Genesis Child Themes #7: CSS de estructura
- Curso de Genesis Child Themes #8: Estilos comunes
- Curso de Genesis Child Themes #9: Puliendo CSS
- Curso de Genesis Child Themes #10: Responsive