Mario Alfredo Azaro
el noviembre 5, 2022 a las 6:27 pm
Comparto una experiencia: No lograba la función “responsive” de éste ejercicio por varios días revisando mis líneas de código y comparando con el video tutorial, hasta que noté el error: una simple “falta de ortografía” al escribir “ancho máximo” (max-whidth, en vez de max-width) alteraba todo mi código!. Como dice Marcelo (el profesor) en el video, esto es sencillo…, pero hay que estar atento a los detalles para que el navegador “comprenda” lo que queremos lograr.
Hola, no estaría funcionando. Al achicar la pantalla se deforma.
@media screen and (max-width: 576px)
{
.grid-container {
grid-template-columns: 1;
grid-template-rows: 50px 200px 0.5fr 0.5fr 0.5fr 100px 50px 100px;
grid-template-areas: “nav nav nav nav” “main main main main” “main main main aside” “article1 article1 article1 article1” “article3 article3 article3 article3” “article2 article2 article2 article2” “gallery gallery gallery gallery” “aside” “aside” “aside” “aside” “footer footer footer footer”;
}
}
Pusiste 8 filas
grid-template-rows: 50px 200px 0.5fr 0.5fr 0.5fr 100px 50px 100px;
y tenes 9 filas en el grid template areas.
grid-template-areas: “nav nav nav nav” “main main main main” “main main main aside” “article1 article1 article1 article1” “article3 article3 article3 article3” “article2 article2 article2 article2” “gallery gallery gallery gallery” “aside” “aside” “aside” “aside” “footer footer footer footer”;
Ademas de tener una fila con “aside” separados y no agrupados
Me interezante “media query” , práctica mucha y lógica .siempre YouTube o leer para entiendo contexto .
Pusiste 8 filas
grid-template-rows: 50px 200px 0.5fr 0.5fr 0.5fr 100px 50px 100px;
y tenes 9 filas en el grid template areas.
grid-template-areas: “nav nav nav nav” “main main main main” “main main main aside” “article1 article1 article1 article1” “article3 article3 article3 article3” “article2 article2 article2 article2” “gallery gallery gallery gallery” “aside” “aside” “aside” “aside” “footer footer footer footer”;
Ademas de tener una fila con “aside” separados y no agrupados
Comparto una experiencia: No lograba la función “responsive” de éste ejercicio por varios días revisando mis líneas de código y comparando con el video tutorial, hasta que noté el error: una simple “falta de ortografía” al escribir “ancho máximo” (max-whidth, en vez de max-width) alteraba todo mi código!. Como dice Marcelo (el profesor) en el video, esto es sencillo…, pero hay que estar atento a los detalles para que el navegador “comprenda” lo que queremos lograr.
no me estaria funcionando y eso que controle el tema de las filas… me estoy por dar por vencido ja
@media screen and(max-width:576px) {
.grid-con{
grid-template-columns: 1;
grid-template-rows: 50px 200px 0.5fr 0.5fr 0.5fr 100px 50px 100px;
grid-template-areas:
“nav nav nav nav”
“main main main main”
“aside aside aside aside”
“art1 art1 art1 art1”
“art2 art2 art2 art2”
“art3 art3 art3 art3”
“galery galery galery galery”
“footer footer footer footer”;
SOLUCIONADO… CON UN ESPACIO DESPUES DE AND….NO PENSE QUE TENDRIA QUE VER