Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

El número mágico en CSS

Hola comunidad Alura. Estoy siguiendo el paso a paso de los nuevos cursos, por lo que me surgió lo siguiente: En una de las clases, el instructor indica que no es bueno estar "adivinando el número mágico" para aplicar en el código CSS, sin embargo en la clase "Arreglando el mapa de cursos" el mismo instructor hace uso del famoso "número mágico". Yo no estoy cuestionando el hecho del uso de ese número, porque entiendo que habrán momentos en los que es funcional, sin embargo al momento de aplicar el mismo código, en el mismo index.html del curso, a mi no me funciona dicho número mágico, pues al aplicar los 250px en el height del div, y después utilizar la función "flex-wrap:wrap;", uno de los elementos de la lista se pasa a la siguiente, tal como lo muestro en la imagen

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Por lo que mi duda es, cómo se puede solucionar este tipo de situaciones, al momento de estar programando, y no estar quebrándome la cabeza encontrando el "número mágico" para que quede bien estructurada la lista.

3 respuestas

Hola Alumno, espero que estés bien.

flex-wrap: wrap hace con que el elemento caiga para la próxima línea si no hay espacio suficiente. Para evitar este comportamiento antes de hora una solución seria ajustar el tamaño de los elementos que están dentro de la flex-box para que quepan en el espacio deseado.

En estos casos, hay diferentes estrategias que puedes considerar para solucionar problemas de diseño en CSS. Una opción es utilizar medidas relativas en lugar de medidas absolutas, como porcentajes o ems. Esto permite que el diseño se ajuste automáticamente a diferentes tamaños de pantalla y resoluciones. También puedes experimentar con diferentes valores de altura y ancho hasta encontrar la combinación que mejor se adapte a tus necesidades. Además, puedes utilizar herramientas de depuración, como el modo de inspección de Chrome, para ver cómo se aplican las reglas y buscar soluciones a tus problemas.

Si tienes alguna duda, no dejes de preguntar. ¡Estamos aquí para ayudarte!.

¡Saludos!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios

me paso lo mismo yo lo arregle height: 255px ... de nada

buenas tardes, compañero:

Las pruebas las puedes hacer también en inspeccionar en el navegador, cuando visualizas la clase y le das clic, al lado derecho de la pantalla te aparece los atributos y height mientras le subía o le bajaba los px podría visualizar en tiempo real como se acomodaban los elementos de la clase .rodapePrincipal-navMap-listm, porque a mí me paso lo mismo que a ti, asi que el numero magico en mi caso fue 252px.

Saludos.