Solucionado (ver solución)
Solucionado
(ver solución)
2
respuestas

Problema de visualización

Referente al curso Flexbox: Posicione elementos en la pantalla, en el capítulo Arreglando los elementos con Flex para Mobile y actividad Comenzando responsive

por SilviaJulianaRocioDiazDiaz
| 105k xp | 188 posts

Hola! Les comento que algunos de los items de mi lista de cursos se ven siameses, como 'Flexbox' y 'Desarrollo Web', acá lo pueden notar: Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadAquí dejo mi CSS:

.headerPrincipal .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.headerPrincipal-nav {
    display: flex;
}

.rodapePrincipal-patrocinadores .container{
    display: flex;
    justify-content: space-between;
}

.rodapePrincipal-patrocinadores-list{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 70%;
    margin-right: 5%;
}

.rodapePrincipal-contatoForm{
    width: 25%;
}
.rodapePrincipal-contatoForm-fieldset{
    display: flex;
}
.rodapePrincipal-navMap-list{
    display: flex;
    flex-direction: column;
    height: 250px;
    flex-wrap: wrap;
}

.contenidoPrincipal-cursos{
    display: flex;
    flex-wrap: wrap;
}

.contenidoPrincipal-cursos-link{
    display: flex;
    width: 23%;
}
2 respuestas
solución!
por Rafaela Rocha
| 2874.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Silviajulianarociodiazdiaz!

Gracias por compartir tu problema de visualización en tu lista de cursos. Parece que algunos de los elementos se ven superpuestos, como "Flexbox" y "Desarrollo Web".

Después de revisar tu código CSS, parece que estás utilizando la propiedad display: flex en varios elementos, lo cual es genial para aprovechar las capacidades de Flexbox. Sin embargo, es posible que necesites ajustar algunas propiedades para lograr el diseño deseado.

Una posible solución sería agregar un margen a los elementos de la lista de cursos para separarlos adecuadamente. Puedes hacerlo añadiendo la propiedad margin a la clase .contenidoPrincipal-cursos-link. Por ejemplo:

.contenidoPrincipal-cursos-link {
    display: flex;
    width: 23%;
    margin: 0 1%; /* Ajusta el margen según tus necesidades */
}

Esto agregará un margen de 1% a la izquierda y a la derecha de cada elemento de la lista de cursos, lo que debería ayudar a evitar la superposición.

Recuerda que puedes ajustar el valor del margen según tus necesidades y preferencias de diseño. También puedes experimentar con otras propiedades de Flexbox, como justify-content y align-items, para lograr el diseño exacto que deseas.

¡Espero que esta solución te ayude a resolver tu problema de visualización! Si tienes alguna otra pregunta, no dudes en hacerla.

¡Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)
por SilviaJulianaRocioDiazDiaz
| 105k xp | 188 posts

Gran explicación, entendido!