AnimeFreak- 6ª fase

AnimeFreak

Sexta fase

Sección Comunidad- estilos y responsive

Responsive- comunidad

El responsive de esta sección lo haremos cambiando el número de columnas de nuestra rejilla, queremos que en lugar de 9 sean dos columnas por cada fila. Es un trabajo laborioso, pero la única dificultad es estar atentos.

Distribuiremos los apartados del siguiente modo en las filas:

La primera fila incluirá todo el apartado "arena". La segunda fila, tendrá "originalFreak" y "blog". En la tercera pondremos únicamente a "fanArt". Finalmente compartirán la cuarta fila "webDescargas" y "eventos".

Comenzaremos añadiendo el media query a nuestro código.

Como tenemos que cambiar la rejilla, debemos añadir en nuestro media query para empezar la clase donde definimos el número de columnas. Es la clase .comunidad .lista-comunidad.

Lo que definiremos aquí es que las columnas sean 2, de 1fr cada una, la separación entre items (gap) la reduciremos a 10px y, finalmente, también reduciremos el padding.

Nos aparecerá todo descolocado, por eso vamos a decir a cada apartado dónde debe colocarse. Lo haremos modificando el grid-area de cada uno.

Fijémonos en que, tanto la chica como el apartado webDescargas, quedan por encima de la cabecera responsive y del logo. Esto es porque en esos dos elementos hemos definido z-index, la chica en 2 para quedar sobre los apartados, y webDescargas en 3 para quedar sobre la chica.

Esto nos obliga a realizar una modificación en el media query de la cabecera.

La modificación de la cabecera responsive es sencilla, bastará con añadir un z-index superior a 3 en la clase .cabecera del media query.

En el tamaño móvil, vamos a hacer que la chica no aparezca, con display:none.

A continuación vamos a quitar el párrafo de originalFreak y de webDescargas, quedaría demasiado pequeño en dispositivo móvil.

¡¡¡ Hasta pronto !!!