Creando aplicaciones de React RESPONSIVE

Último capítulo del curso React en el que te voy a mostrar el uso de media queries de CSS para crear apps responsive.
Si quieres que haga algunos proyectos extra diferentes a este, puedes dejármelo en los comentarios. Si veo que lo queréis muchos, seguiré haciendo más proyectos.

Elementos responsive con React

Para mostrar correctamente las cajas también en los dispositivos con pantallas pequeñas, podemos hacer uso de las media queries de CSS.

Solo tenemos que modificar el estilo de contenedorCajas en función del tamaño de la pantalla. Yo lo que quiero, es que cuando los elementos en tres columnas ya no quepan bien en la pantalla, que se pongan en filas. Esto es tan fácil como cambiar el display: flex por un display: inline-block.

.contenedorCajas{ 
	display: flex;
	justify-content: center;
	}
	@media screen and (max-width: 700px) {
		.contenedorCajas {
		display: inline-block; 
	} 
}

Con esto, cuando la pantalla pase a ser de 700px de ancho o menos, las cajas se van a colocar en filas.

Si quieres, puedes añadir diferentes tamaños de la misma forma, para que el comportamiento cambie con más tamaños de pantalla.

No vamos a profundizar más aquí, ya que esto son temas específicos de CSS. Lo dejo para el curso que tengo dedicado a CSS.