Lección 31 de 47 ≈ 75 min Laboratorio reproducible Codex + GPT-5.6 Sol
Resultado visible
Aprenderás a convertir «no se ve bien» en tres defectos reproducibles: desbordamiento horizontal, controles que no caben y texto recortado.
Estado roto
En una rama de laboratorio crea o identifica:
.hero { width: 900px; }
.actions { display: flex; flex-wrap: nowrap; }
.card-title { white-space: nowrap; overflow: hidden; }
No publiques este cambio. Abre la ruta a 320 y 390 px, con texto normal y zoom al 200 %.
Registro del defecto
Ruta: /servicios
Viewport: 390 × 844
Pasos: cargar, desplazarse al hero, intentar leer título y botones
Observado: scroll horizontal; segundo botón fuera; título incompleto
Esperado: ancho contenido, botones utilizables y título completo
Prompt de corrección
Reproduce los tres defectos antes de editar. Encuentra el elemento exacto
que aumenta `scrollWidth`. Corrige con tamaños fluidos, `max-width`, wrap
y texto adaptable; no ocultes el problema con `overflow-x: hidden` global.
Prueba 320, 390, 768 y 1440 px, zoom 200 %, contenido largo y teclado.
Entrega valores de clientWidth/scrollWidth y capturas antes/después.
Verificación y restauración
document.documentElement.scrollWidth no debe superar clientWidth. El título se lee completo, los controles conservan etiquetas y foco y el orden sigue siendo lógico. Revierte la rama rota y aplica únicamente la corrección demostrada.
Fuentes oficiales
Siguiente misión recomendada
Si has guardado la evidencia de esta lección, continúa con «Laboratorio: encuentra servidores locales duplicados». Si no, repite la comprobación antes de avanzar.