A menudo, cuando trabajas maquetando una página con el editor de bloques te encuentras con la necesidad de que uno de ellos ocupe todo el espacio de la pantalla del navegador del visitante, y lo que es aún más importante, que ocupe la pantalla completa del navegador, sea cual sea este el navegador que utilice el usuario.
Un error muy común es forzar la altura del bloque en píxeles, que es el valor por defecto que aparece en las opciones de diseño de los bloques.
Pero esto tiene un problema, y es que ese ajuste solo servirá para determinados tamaños de pantalla y navegador, no digamos en móviles, donde se puede descontrolar del todo, ocupar más de una pantalla del dispositivo.
¿Cómo se consigue entonces con el editor que un bloque ocupe toda la pantalla de cualquier dispositivo?
El truco consiste en cambiar el método de cálculo de la altura del bloque, por defecto en píxeles, a el denominado VH, que es la abreviatura de viewport height, o altura del puerto/espacio visible/pantalla del dispositivo.
Solo tienes que hacer clic en donde se muestra PX y cambiarlo a VH. A continuación, si lo que quieres es que ocupe la pantalla completa (en altura) de cualquier dispositivo desde el que se visualice el bloque, solo tienes que poner como valor 100.
De este modo estarás maquetando el bloque en modo adaptable (responsive), y se visualizará a pantalla completa en cualquier dispositivo y tamaño de pantalla.
Como verás, en el ejemplo he usado el bloque de fondo, porque es más fácilmente visible el efecto, pero puedes aplicar este truco de diseño a cualquier bloque del editor de WordPress.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
