Con Flexbox, Grid y media queries aparecen problemas nuevos: algo se desborda, una columna no aparece, un estilo no se aplica en el móvil.
Describe → aísla → hipótesis → prueba en vivo → corrige y haz commit.
Distintivos flex/grid, estilos calculados y modo dispositivo son tus aliados.
Los desbordamientos suelen venir de imágenes, anchos fijos o textos largos.
Pregunta a la IA para entender, con el código mínimo, y declara el uso.
Con Flexbox, Grid y media queries aparecen problemas nuevos: algo se desborda, una columna no aparece, un estilo no se aplica en el móvil. Depurar es una habilidad que se entrena con método. La IA te puede ayudar como tutor: la IA explica, tú escribes.
Describe el problema con precisión. No "se ve mal", sino "en pantallas de menos de 700 px la galería sigue en tres columnas". Aísla el elemento. Inspecciónalo en las DevTools. ¿Qué reglas le afectan? ¿Hay alguna tachada? Formula una hipótesis. "Creo que la media query no se aplica porque…". Prueba en vivo en las DevTools: activa y desactiva propiedades, cambia valores. Aplica la corrección en tu fichero, guarda y comprueba. Si funciona, haz commit.
Distintivos flex y grid en la pestaña Elementos: dibujan ejes, líneas y áreas. Estilos calculados (Computed): el valor final de cada propiedad y de qué regla viene. Modo dispositivo: probar anchos y ver qué media query se activa. Un borde provisional para ver cajas: * { outline: 1px solid red; } (bórralo después).
Si aparece una barra de desplazamiento horizontal en el móvil, algo es más ancho que la pantalla. Suele ser:
una imagen sin max-width: 100%, un ancho fijo en píxeles (width: 900px), una palabra o URL larguísima sin partir (overflow-wrap: anywhere lo arregla), un min-width excesivo en una columna de Grid.
Pregunta con contexto, el código mínimo que reproduce el problema y pidiendo explicación y método, no la solución hecha:
Estoy aprendiendo CSS Grid (1º de un ciclo de diseño). Quiero que la galería tenga una columna en móvil y tres a partir de 700 px, pero en el móvil siguen saliendo tres columnas. Este es mi CSS: .galeria { display: grid; grid-template-columns: repeat(3, 1fr); } @media (min-width: 700px) { .galeria { grid-template-columns: 1fr; } } Explícame qué está pasando y cómo lo compruebo con las DevTools. No me des el código corregido.
(¿Has visto el error? Las columnas están al revés: el estilo base debería ser el del móvil.)
⚠️ Atención. La IA puede sugerir soluciones antiguas (maquetar con float, hacks de hace diez años) o propiedades que no existen. Contrasta siempre con MDN y pruébalo tú.
Con Flexbox, Grid y media queries aparecen problemas nuevos: algo se desborda, una columna no aparece, un estilo no se aplica en el móvil.
Código del tema: outline: 1px solid red
Con Flexbox, Grid y media queries aparecen problemas nuevos: algo se desborda, una columna no aparece, un estilo no se aplica en el móvil. Depurar es una habilidad que se entrena con método. La IA te puede ayudar como tutor: la IA explica, tú escribes.
flex y grid en la pestaña Elementos: dibujan ejes, líneas y áreas.* { outline: 1px solid red; } (bórralo después).Si aparece una barra de desplazamiento horizontal en el móvil, algo es más ancho que la pantalla. Suele ser:
max-width: 100%,width: 900px),overflow-wrap: anywhere lo arregla),min-width excesivo en una columna de Grid.Pregunta con contexto, el código mínimo que reproduce el problema y pidiendo explicación y método, no la solución hecha:
Estoy aprendiendo CSS Grid (1º de un ciclo de diseño). Quiero que la galería tenga
una columna en móvil y tres a partir de 700 px, pero en el móvil siguen saliendo
tres columnas. Este es mi CSS:
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 700px) { .galeria { grid-template-columns: 1fr; } }
Explícame qué está pasando y cómo lo compruebo con las DevTools.
No me des el código corregido.(¿Has visto el error? Las columnas están al revés: el estilo base debería ser el del móvil.)
⚠️ Atención. La IA puede sugerir soluciones antiguas (maquetar con float, hacks de hace diez años) o propiedades que no existen. Contrasta siempre con MDN y pruébalo tú.