Una página que se mueve lateralmente en el teléfono suele tener contenido más ancho que el espacio disponible. Puede ser una tabla, un elemento incrustado con ancho fijo, una cadena larga o una regla de diseño. Ocultar el desbordamiento de toda la página puede disimular el síntoma y recortar información útil.
Reproduce el problema al ancho donde aparece. Revisa la página real, no solamente el lienzo del editor. Las herramientas adaptables ayudan, pero un teléfono también muestra diferencias de interacción y tamaño de texto que una ventana estrecha puede omitir.
Busca qué caja rebasa la pantalla. Revisa tablas, medios incrustados, ejemplos de código y contenedores con anchos explícitos. Una dirección o identificador largo puede desbordar aunque el párrafo parezca normal.
Para una tabla de datos, puede servir un contenedor con desplazamiento controlado. El lector debe descubrirlo y entender los encabezados. Para una imagen, quizá corresponda un ancho adaptable que conserve proporciones. Son soluciones distintas porque el contenido cumple tareas diferentes.
Un módulo externo puede necesitar ajustes o código del proveedor. No impongas un ancho que rompa controles u oculte información esencial. Prueba la presentación mínima admitida y considera un enlace sencillo si el módulo no funciona razonablemente en ese espacio.
Revisa márgenes internos, columnas y anchos mínimos en el tema o la hoja personalizada responsable. Limita el cambio al componente. Una regla global puede arreglar una página y dañar otra que dependía del comportamiento anterior.
Leer el diagrama como texto
- Tabla de datos ancha: Considera un contenedor desplazable fácil de reconocer que conserve encabezados.
- Imagen demasiado grande: Usa un tamaño adaptable que mantenga sus proporciones.
- Contenido incrustado de ancho fijo: Utiliza ajustes adaptables admitidos o un enlace alternativo claro.
- URL o código sin cortes: Revisa saltos y ancho mínimo del componente sin recortar su significado.
Vuelve a probar anchos cercanos, texto ampliado y el componente en computadora.
Después, prueba anchos cercanos, texto ampliado y ambas orientaciones cuando corresponda. Comprueba que los botones sigan accesibles y que no se haya recortado el contenido. Revisa también el componente en escritorio.
Guarda la causa y la corrección concreta en las notas de diseño. Otra tabla importada o dirección larga puede revelar la misma debilidad; entender el componente ayuda más que un parche visual aislado. Incluye un ejemplo de contenido difícil en las comprobaciones futuras para detectar la regresión antes de publicar nuevas páginas.
