Responsividad móvil para interfaces creadas por IA: una auditoría práctica de diseño

Qué suele fallar en móvil (en términos sencillos)

Cuando alguien dice que una página "no es amigable para móviles", normalmente se refiere a algo simple: carga, pero es molesta o imposible de usar en un teléfono real.

Reconocerás los síntomas:

• Puedes deslizar lateralmente porque algo es más ancho que la pantalla
• El texto se corta o se solapa
• Botones y enlaces son demasiado pequeños, están demasiado juntos o quedan parcialmente fuera de la pantalla
• El layout salta cuando cargan imágenes o cuando abres el teclado
• Menús, modales o dropdowns aparecen en el sitio equivocado y te atrapan

Esto ocurre mucho con prototipos creados por IA porque muchas herramientas generan una UI que se ve bien en la vista de escritorio y la mantienen con CSS frágil: anchos fijos, posicionamiento absoluto y espaciado píxel-perfecto. También asumen un solo tamaño de fuente, una sola longitud de contenido y un solo tamaño de ventana. Los teléfonos rompen esas suposiciones muy rápido.

Un ejemplo realista: una pantalla de onboarding usa un layout de dos columnas dentro de un contenedor fijo de 900px. En escritorio se ve limpio. En un teléfono, la columna derecha empuja más allá del borde y aparece el scroll horizontal. El botón "Continuar" queda bajo el pliegue y el texto legal se solapa con un campo porque el teclado reduce la ventana visible.

Si quieres responsividad, no rediseñes primero. Audita primero y luego arregla en orden: encuentra qué fuerza la página a ser más ancha que la pantalla, elimina el CSS que fija elementos en su sitio y solo entonces ajusta espaciado y objetivos táctiles.

Prepara una prueba rápida y realista

Prueba en dispositivos reales cuando puedas. Una ventana de escritorio redimensionable ayuda, pero puede ocultar las molestias que crean los teléfonos reales: la UI del navegador que ocupa espacio, el renderizado distinto de fuentes, safe areas y cómo tu pulgar realmente alcanza los botones.

Elige 3 a 5 pantallas que representen la app completa (no cada página). Un buen primer conjunto es: inicio/dashboard, inicio de sesión, ajustes/perfil y una "pantalla de dinero" como checkout, upgrade o reserva. Arreglar estas suele facilitar el resto.

Elige algunos tamaños comunes y mantenlos para comparar antes y después. No buscas cubrir todos los dispositivos, solo los que revelan decisiones de layout débiles:

• Teléfono pequeño: 360 x 800
• Teléfono grande: 390 x 844
• Teléfono plus: 414 x 896
• Tablet: 768 x 1024
• Un tamaño intermedio según tus analíticas (si las tienes)

Define qué significa "bueno" antes de tocar CSS: nada de desplazamiento lateral, texto legible sin hacer zoom, botones fáciles de tocar y flujos clave completables con una sola mano.

Una regla práctica: si no puedes terminar el inicio de sesión y la acción principal en un teléfono real en menos de un minuto, el layout no está listo.

Encuentra las fuentes de overflow y scroll horizontal

El desplazamiento lateral casi siempre significa que un elemento es más ancho que la pantalla.

Reproduce el problema en una ventana estrecha. Si puedes arrastrar la página a la izquierda y derecha aunque sea un poco, algo está desbordando.

Una forma rápida de hallar el culpable es perfilar temporalmente todo con outlines, luego desplazar lateralmente y ver qué sobresale. Cuando veas la tarjeta o el botón "misterioso" asomando por el borde, inspecciona su ancho, padding y cualquier contenido hijo que pueda estar forzándolo a ser más ancho.

Las mismas causas aparecen una y otra vez: anchos fijos (como un contenedor a 420px), imágenes o SVGs grandes que no se reducen, cadenas largas sin rupturas (emails, IDs, claves) que no envuelven, tablas anchas y elementos posicionados con absolute que se extienden más allá del viewport.

El overflow suele esconderse dentro de componentes que flotan sobre la página. Modales, dropdowns y toasts pueden tener sus propios contenedores con anchos fijos, padding extra o animaciones que los empujan fuera de la pantalla. Un modal puede parecer centrado en escritorio pero aún así crear scroll horizontal en móvil porque su contenido interno se niega a reducirse.

Una regla que ahorra tiempo: prefiere tamaños flexibles antes de añadir más breakpoints. Antes de apilar más reglas @media, elimina la restricción dura que obliga al layout a ser ancho.

Ejemplo: una pantalla de onboarding tiene un modal "Verificar código". El modal mide 480px y el campo de código muestra un placeholder largo. En un teléfono de 375px el modal desborda. Cambiar el modal para usar max-width: 90vw y permitir que el placeholder se envuelva elimina el scroll sin rediseñar nada.

Elimina CSS frágil que fuerza el layout a romperse

La mayoría de fallos móviles en frontends generados por IA vienen de CSS que asume un solo tamaño de pantalla. Las victorias más rápidas suelen venir de eliminar esas suposiciones.

Busca anchos y alturas fijos que "se ven bien" en escritorio pero no pueden encogerse. Ofensores comunes: width: 1200px, min-width: 900px, height: 100vh en contenedores que deberían crecer, e inputs/botones con tamaños codificados. Si una tarjeta debe tener cierto ancho, empujará todo lo demás hacia el scroll horizontal.

Otro problema común son layouts de contenedor sobre contenedor. Las herramientas de IA suelen apilar wrappers que cada uno añade padding, max-width y centrado. Tres wrappers con 24px de padding pueden robar una cantidad sorprendente de espacio usable en un teléfono pequeño.

Si ves patrones como posicionamiento absoluto para alinear, "números mágicos" como left: 37px, márgenes negativos para empujar elementos o reglas globales como white-space: nowrap, trátalos como sospechosos. Reemplázalos por reglas flexibles que respiren: max-width: 100% en lugar de anchos fijos, height: auto cuando sea posible y gap en lugar de apilar márgenes manualmente.

Ejemplo: una pantalla de onboarding donde el botón "Continuar" está posicionado absolutamente al fondo de una tarjeta. En un dispositivo pequeño, al abrir el teclado el botón se solapa con el formulario. Cambiar la tarjeta a una columna flex y empujar el botón con margin-top: auto lo mantiene en su sitio sin solapamientos.

Haz que los layouts se adapten con flexbox y grid

El código UI generado por IA a menudo solo "funciona" porque el contenido de ejemplo tiene la longitud perfecta. En un teléfono real, el texto se alarga, los botones hacen wrap y el layout colapsa en solapamientos o scroll horizontal.

Una regla simple ayuda: usa flexbox para layouts unidimensionales (una fila o una columna) y grid para layouts bidimensionales (filas y columnas que deben alinearse). Forzar todo en una sola herramienta suele hacer que el código sea frágil.

Usa flexbox para barras de navegación, toolbars, filas de botones y líneas "icono + texto + acción". Usa grid para galerías de tarjetas, páginas de ajustes con etiqueta/valor y dashboards donde las columnas deben alinearse entre filas.

Dos elecciones de CSS hacen la mayor parte del trabajo con contenido real: permitir wrapping y permitir que el texto encoja sin romper la fila.

/* Card rows that wrap without odd gaps */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.card { flex: 1 1 260px; }

/* Grid that adapts to screen size */
.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Mixed content row: icon + long title + button */
.row { display: flex; align-items: center; gap: 8px; }
.title { min-width: 0; flex: 1; }
.action { flex: 0 0 auto; }

Ejemplo concreto: una pantalla de onboarding tiene un nombre de plan largo y un botón "Continuar". Si el título no puede encogerse empuja el botón fuera de la pantalla. Poner min-width: 0 en el título y mantener el botón con flex: 0 0 auto evita el overflow sin rediseñar.

Mejora la legibilidad y los objetivos táctiles sin rediseñar todo

La mayoría del dolor en móvil no es un problema complejo de layout. Es texto demasiado pequeño, espaciado que colapsa y controles difíciles de alcanzar con el pulgar.

Empieza con unos cuantos valores por defecto aburridos que hacen cada pantalla más tranquila: texto base de 16px con interlineado 1.4 a 1.6, encabezados escalados para que no dominen y padding consistente en los contenedores de página (a menudo 16px) para que el contenido no esté pegado a los bordes.

Los objetivos táctiles son la siguiente victoria rápida. Muchas UIs generadas por IA producen botones bonitos que son físicamente diminutos en un teléfono. Aspira a al menos 44x44px para objetivos interactivos, deja 8 a 12px entre acciones separadas y añade padding a enlaces de texto para que sean tocables. Asegúrate también de que los estilos de foco sigan visibles en lugar de quedar recortados.

Los formularios fallan más que las landing pages. Mantén las etiquetas cerca de los inputs, evita filas de formulario en dos columnas en pantallas pequeñas salvo que realmente quepan y haz inputs de ancho completo en móvil. Reserva espacio para mensajes de error para que la página no salte cuando aparece la validación.

Los shifts de layout a menudo vienen de toasts, banners y validación inline. Si los mensajes aparecen y desaparecen, intenta mantener la altura consistente o usa un área overlay para que el contenido no se mueva.

Ejemplo: una pantalla de onboarding con "Nombre" y "Apellido" en la misma fila suele apretar ambos inputs hasta hacerlos inútiles. Cambiar a una sola columna, mantener las etiquetas encima de los campos y dar al botón Continuar un tamaño táctil real puede hacer que todo se sienta terminado sin cambiar el diseño.

Domina componentes complicados: imágenes, tablas y modales

Muchos fallos móviles vienen de unos pocos repetidos culpables: imágenes con tamaños fijos, tablas que asumen ancho de escritorio y modales que olvidan que los teléfonos necesitan desplazamiento.

Imágenes que expanden contenedores

Si una imagen tiene un ancho fijo (como 800px) puede forzar la página a ser más ancha que el teléfono.

Deja que las imágenes se reduzcan pero no crezcan. En la mayoría de los casos, pon max-width: 100% del contenedor y deja que la altura siga la relación de aspecto. Si el diseño necesita un héroe de altura fija, recorta con object-fit para que la imagen no se deforme.

El texto largo e ininterrumpido puede causar el mismo scroll lateral. IDs de usuario, emails, enlaces de invitación, números de pedido y bloques de código suelen negarse a envolver. Aplica reglas de wrapping en áreas de contenido para que las cadenas largas rompan línea en lugar de empujar el layout.

Tablas sin dolor

Las tablas son difíciles en pantallas pequeñas. Elige una estrategia por tabla según lo que la gente realmente necesite hacer en móvil: desplazar la tabla horizontalmente dentro de su propio contenedor, apilar cada fila en un layout tipo tarjeta o mostrar un resumen corto con una vista de detalles simple.

Anota qué opción usaste y por qué. Si no lo documentas, una edición posterior puede reintroducir overflow en silencio.

Modales y drawers que siguen siendo usables

Los modales suelen romper porque su altura está fija y la página detrás sigue desplazándose. Un patrón más seguro: limitar la altura del modal al viewport, hacer que el body del modal desplace internamente y mantener el header (título y cierre) visible.

Comprobaciones rápidas que atrapan la mayoría de bugs:

• El botón de cerrar es visible y fácil de tocar en pantallas pequeñas
• El contenido del modal desplaza internamente, pero el fondo no
• El teclado no oculta el botón de acción principal

Ejemplo: un modal de registro con un párrafo largo de términos debe desplazarse dentro del modal, no expandirse fuera de la pantalla.

Una auditoría paso a paso de layout que puedes repetir en cada página

La velocidad importa. El camino más rápido es auditar una pantalla a la vez y arreglar lo único que empuja el layout fuera de control.

Elige una pantalla que claramente falle en un teléfono. Escribe los síntomas como en un reporte de bug: "tengo que desplazarme lateralmente", "el botón primario está cortado", "el modal sale de la pantalla", "el texto se solapa con el input". Esto te evita perseguir cambios CSS aleatorios.

Luego, aísla el elemento más pequeño que desencadena la rotura. En DevTools, alterna elementos hasta que el problema desaparezca. Suele ser un hijo con ancho fijo, una cadena larga sin romper o un componente que ignora su contenedor.

Un flujo repetible:

• Encuentra el primer elemento que excede el ancho del viewport
• Elimina tamaños fijos (ancho en px, valores left/right fijos) y deja que el padre controle el ancho
• Prefiere reglas fluidas como max-width: 100% y width: 100% cuando correspondan
• Añade wrapping para contenido largo (nombres, emails, textos de error)
• Vuelve a probar en un teléfono real y luego en al menos un ancho de tablet

Ejemplo concreto: una pantalla de onboarding se ve bien en escritorio, pero en iPhone el botón "Continuar" se sale de la pantalla. Inspeccionas el footer y encuentras un contenedor con width: 480px. Borrar esa regla y dejar que el footer use width: 100% arregla el scroll horizontal y trae el botón de vuelta.

Trampas comunes que hacen que las correcciones fallen después

Las correcciones más rápidas para móvil suelen verse bien en un tamaño, luego se rompen cuando aparece contenido real. Una buena regla: si tuviste que adivinar un valor en píxeles, probablemente se romperá más adelante.

Un error común es añadir más breakpoints en vez de arreglar el layout base. Los breakpoints son útiles, pero si el layout base depende de anchos fijos o de un wrapper pensado para escritorio, acabarás persiguiendo nuevos problemas en cada dispositivo. Empieza por contenedores flexibles y luego añade uno o dos breakpoints para cambios grandes.

Otra trampa es usar overflow: hidden para hacer desaparecer el scroll horizontal. Puede ocultar el síntoma mientras corta botones, mensajes de error o outlines de foco. En formularios puede incluso ocultar textos de validación para que los usuarios no puedan completar el flujo.

Las alturas codificadas también son frágiles. Una tarjeta que se ve perfecta con height: 420px recortará contenido cuando un nombre sea más largo, aparezca un error o el usuario active texto más grande. Prefiere flujos de contenido naturales y deja que la página despliegue.

Reglas de espaciado en conflicto pueden deshacer tu trabajo en silencio. Los componentes generados por IA suelen traer sus propios márgenes, paddings y line-heights, y después el CSS global añade más. Cuando un componente llega con distintas suposiciones de espaciado, el alineado se desplaza y el overflow regresa.

No omitas pruebas en modo oscuro y con zoom alto. Comprobaciones rápidas que atrapan fallos temprano: aumenta el tamaño de texto al 200% y revisa formularios y modales, activa modo oscuro y busca bordes invisibles o textos auxiliares ilegibles, y prueba un ancho de teléfono pequeño y uno grande.

Lista rápida de verificación para usabilidad móvil

Usa esto después de arreglar overflow y CSS frágil. Atrapa las cosas que hacen que una página se sienta rota en un teléfono real, aunque se vea bien en escritorio.

Asegúrate de que la página nunca obliga a moverse lateralmente. Abre tus pantallas clave (landing, inicio de sesión, dashboard, ajustes) y prueba deslizar a la izquierda y a la derecha. Si algo se mueve, algo sigue siendo más ancho que el viewport.

Luego revisa legibilidad e interacción: los párrafos deben envolver naturalmente, los encabezados no deben cortarse, no deberías necesitar hacer zoom para leer etiquetas o errores y los botones no deberían sentirse apretados.

Un conjunto simple de comprobaciones:

• No hay scroll horizontal en pantallas clave (incluyendo dentro de modales)
• El texto envuelve naturalmente (no hay encabezados cortados ni bloques de texto de ancho fijo)
• Los objetivos táctiles se sienten seguros (botones y enlaces no están apretados)
• Los formularios permanecen utilizables (inputs, dropdowns y estados de error permanecen visibles)
• Flujos con una sola mano funcionan (menús y modales no requieren taps de precisión)

Después de cualquier cambio de UI, vuelve a revisar solo unas pocas cosas: un viewport de 320px aún funciona, con el teclado abierto puedes alcanzar el siguiente campo y el botón de enviar, los estados de error siguen visibles, los estados de carga no estiran contenedores y el modo oscuro sigue legible.

Ejemplo: si una página de ajustes generada por IA añade una nueva pastilla "Upgrade to Pro", puede reintroducir overflow en silencio. Detecta esto temprano repitiendo la prueba de deslizar y la comprobación de 320px.

Ejemplo: rescatar una pantalla de onboarding rota

Un caso común: la pantalla de onboarding se ve bien en escritorio, pero en un iPhone la tarjeta está cortada, la página se desplaza lateralmente y el botón "Continuar" queda bajo el teclado.

En un rescate típico, tres causas raíz creaban la mayor parte del daño. La tarjeta principal tenía un ancho fijo (por ejemplo 520px) y un margin-left duro, así que no podía encogerse. El campo de email permitía direcciones largas que sobresalían porque la fila del input no podía reducirse limpiamente. Y un modal de "Términos" usaba una altura fija sin desplazamiento interno, por lo que desbordaba el viewport.

La auditoría empieza reproduciendo el problema en tamaños de dispositivo reales, luego encontrando el primer elemento que sobresale. Desde ahí, asciende por la cadena de padres hasta encontrar el contenedor que se niega a encoger.

Las correcciones fueron pequeñas y enfocadas en eliminar tamaños forzados. La tarjeta pasó de ancho fijo a max-width con tamaño fluido, los márgenes se volvieron responsivos (centrados con márgenes laterales automáticos), la fila del input obtuvo reglas que le permiten encogerse sin empujar a los hermanos y el modal cambió de altura fija a una max-height basada en el viewport con desplazamiento interno.

Las comprobaciones de aceptación en teléfono y tablet fueron sencillas:

• No hay desplazamiento horizontal en ninguna parte, incluso al enfocar inputs
• El botón primario permanece visible por encima del teclado
• El modal cabe en la pantalla y desplaza dentro de su propio contenido
• El texto permanece legible sin hacer zoom y los objetivos táctiles se sienten cómodos

Siguientes pasos si tu UI generada por IA sigue rompiéndose

Si los problemas móviles siguen regresando, el proyecto suele carecer de reglas de layout compartidas. Unas pocas decisiones ahora previenen que la próxima ronda de arreglos deshaga lo anterior.

Escribe una nota corta de "reglas móviles" y mantenla cerca del código. Sé específico:

• No anchos fijos en contenedores a nivel de página (prefiere max-width y tamaños fluidos)
• Cualquier componente que pueda desbordar debe gestionarlo a propósito (wrap, clamp o scroll)
• Un sistema de espaciado (un conjunto reducido de gaps y tamaños de fuente)
• Botones e inputs deben seguir siendo usables con el pulgar (altura cómoda y etiquetas claras)

Luego arregla en un orden que cree estabilidad: elimina primero el scroll horizontal, luego arregla formularios (inputs, errores, comportamiento con teclado) y solo entonces pule pantallas secundarias.

Si heredaste un frontend generado por IA y sigues encontrando las mismas fallas de layout, puede ser más rápido obtener un diagnóstico claro de lo que realmente fuerza el overflow y el posicionamiento frágil. FixMyMess (fixmymess.ai) se centra en reparar apps creadas por IA de herramientas como Lovable, Bolt, v0, Cursor y Replit, y una auditoría rápida del código puede decirte exactamente qué falla en dispositivos reales antes de que pierdas tiempo parchando síntomas.