Un diseño responsive no se ve bien
Utiliza esta guía cuando el contenido se recorta, desaparece, se superpone o aparece en un orden incorrecto a una anchura de pantalla determinada.
Registra la anchura en la que falla
Anota la anchura del área de visualización y comprueba inmediatamente por encima y por debajo de los principales límites responsive del tema: 992 px, 768 px y 544 px. Esto muestra si el cambio está vinculado a un rango configurado y no a un modelo de dispositivo concreto.
Inspecciona de fuera hacia dentro
- Edita la página en Page Builder → Backend Editor.
- Localiza el elemento afectado, junto con su columna y su fila superiores.
- Comprueba la visibilidad según dispositivo en la fila, después en la columna y por último en el elemento.
- Revisa los valores de anchura y desplazamiento de la columna para el rango en el que falla.
- Comprueba el relleno y el margen responsive en cada nivel.
- Revisa los ajustes de alineación, fondo y altura mínima que pueden cambiar en anchuras más pequeñas.
- Guarda, actualiza y vuelve a comprobar a la anchura exacta registrada.
Un elemento superior oculto oculta a todos sus hijos. El espaciado extra tanto en una fila como en su hijo también puede combinarse y dar lugar a un hueco inesperadamente grande.
Comprueba el orden y el espacio disponible
Las columnas responsive siguen el orden del código fuente del documento, salvo que un control de diseño admitido cambie la presentación. Si el contenido móvil aparece en una secuencia incorrecta, corrige el orden en el maquetador en lugar de depender de la colocación visual en el escritorio.
Las cabeceras fijas, los controles fijos, las barras de contacto y la interfaz del navegador reducen el espacio utilizable. Prueba la página con el menú móvil cerrado y con el teclado en pantalla oculto antes de cambiar el diseño.
Distingue entre el diseño y el CSS obsoleto
Si los valores del maquetador son correctos pero la URL pública sigue mostrando la disposición antigua:
- Actualiza la página para refrescar los estilos específicos de la página.
- Vacia la caché de la página y la caché de la CDN.
- Vuelve a comprobar en una ventana privada.
- Regenera los recursos de todo el sitio únicamente si varias páginas muestran la misma regla responsive obsoleta.
Resultado esperado
El diseño cambia en el límite previsto, se mantiene legible entre límites y conserva un orden lógico del código fuente para los usuarios de teclado y de tecnologías de asistencia.
Si la superposición persiste
Elimina temporalmente solo la altura fija, el margen negativo o el desplazamiento del elemento afectado. Si la superposición desaparece, restaura los valores de uno en uno para encontrar la restricción conflictiva. Evita compensarla con un espaciado global no relacionado.