Una página obliga a desplazarse horizontalmente en un teléfono. ¿Cómo encontrar el elemento responsable y corregirlo conservando contenido y accesibilidad?

En una página hipotética que desborda en móvil, el primer paso es reproducir el problema con el ancho donde aparece y localizar qué caja supera el espacio disponible. El inspector del navegador permite recorrer imágenes, tablas, filas y contenedores, comparando su ancho calculado con el de sus antecesores. Conviene comprobar también el viewport y repetir la prueba con textos largos y contenido realista.

Si la responsable es una imagen, max-width: 100% limita su tamaño al contenedor y height: auto suele conservar su proporción. Se revisan además reglas que impongan un ancho o un mínimo fijo al propio contenedor: reducir la imagen no corrige una caja exterior demasiado ancha. El texto alternativo debe mantenerse.

Para una fila de tarjetas o controles se decide si puede envolver sus elementos, cambiar a una columna o reducir un mínimo de tamaño que impida encogerlos. Una tabla de datos necesita conservar la relación entre encabezados y celdas; cuando requiere anchura, puede ser preferible un contenedor con desplazamiento horizontal localizado y una indicación comprensible. Hay que comprobar que las personas que usan teclado puedan acceder a su contenido.

Aplicar overflow: hidden al cuerpo puede esconder el síntoma y recortar texto, controles o indicadores de foco. La corrección debe responder al elemento responsable y conservar la información.

La validación final incluye orientación vertical y horizontal, aumento de texto, navegación con teclado y varios anchos próximos al punto de fallo. También se revisa un teléfono real cuando sea posible: una captura inmóvil no permite comprobar interacción ni lectura completa.

Fuentes: Diseño web adaptable y Propiedad overflow.