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

Haga lo que hicimos

Adjunto cambios licitados

.presentacion__imagen{
    width: 50%;
}

.presentacion__contenido{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.presentacion__enlaces__link{
      /* background-color: #22D4FD; */
      border: 2px solid var(--color-terciario);
      width: 50%;
      text-align: center;
      border-radius: 8px;
      font-size: 1.5rem;
      font-weight: 600;
      padding: 21.5px 0;
      text-decoration: none;
      color: var(--color-secundario);
      font-family: var(--fuente-montserrat);
      display: flex;
      justify-content: center;
      gap: 10px;
}

![](Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad )

2 respuestas

Hola, Gino, espero que estés bien

Parece que estás trabajando en la responsividad de tu sitio web. Vamos a revisar los cambios que has hecho y cómo podrían mejorarse para asegurar que el diseño se adapte bien a diferentes tamaños de pantalla.

  1. Imágenes Responsivas:

    • Asegúrate de que la clase .presentacion__imagen está aplicada a las imágenes correctas en tu HTML. El ancho del 50% debería funcionar bien si el contenedor padre tiene un ancho definido.
  2. Ajuste de Contenido:

    • La clase .presentacion__contenido está configurada para ocupar el 50% del ancho, lo cual es adecuado. Sin embargo, asegúrate de que el contenedor padre tiene suficiente espacio o que los elementos dentro de .presentacion__contenido no se desborden.
  3. Enlaces de Navegación:

    • Los enlaces tienen un ancho del 50%, lo cual es bueno para la responsividad. Sin embargo, si ves que se ven muy grandes o pequeños en ciertas pantallas, podrías considerar usar media queries para ajustar el ancho en diferentes dispositivos.
  4. Media Queries:

    • Considera usar media queries para ajustar estilos específicos en diferentes tamaños de pantalla. Por ejemplo:

      @media (max-width: 720px) {
        .presentacion__imagen, .presentacion__contenido, .presentacion__enlaces__link {
          width: 100%;
        }
      }
      

Esto hará que los elementos ocupen el 100% del ancho en pantallas más pequeñas, mejorando la usabilidad.

Espero que estas sugerencias te ayuden a mejorar la responsividad de tu sitio. ¡Bons estudios!

Hola Gino, espero que estés muy bien.

Felicitaciones por tu aprendizaje. Estamos priorizando el foro para postear dudas, así optimizamos el tiempo de respuesta para ustedes.

Te recomiendo que puedas interactuar con el resto de nuestros compañeros por nuestro Discord.

En virtud de que en Discord el alcance es mayor, la interacción es inmediata y llega a más compañeros y el foro solo quedaría para esclarecer cualquier duda que puedas tener sobre el contenido de los cursos.

De esa manera si tienes algún comentario, opinión, recomendación o algún consejo, o para compartir los desafios sea por el Discord, con certeza por ahí llegará a más personas.

Un saludo.

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