Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Haga como lo hicimos en clase

  1. Clase para imágenes al 50% del padre
    HTML
Descripción de la imagen

CSS
.presentacion__imagen {
width: 50%; /* ocupa 50% del contenedor padre /
max-width: 100%; /
evita desbordes /
height: auto; /
mantiene proporción /
display: block; /
elimina espacio fantasma inline /
object-fit: cover; /
opcional, mejora recortes si forzas alturas */
}

Prueba el ancho del viewport en 720px con las DevTools y verifica que la imagen ocupe la mitad del contenedor.

  1. Ajustar layout para distintos dispositivos

Activa Flexbox en el contenedor y usa gap para separar:

.presentacion {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: 5%;
}

En DevTools → Toggle device toolbar, simula portátiles, tablets y móviles. Si en pantallas pequeñas el layout queda apretado, apílalo con una media query:

@media (max-width: 720px) {
.presentacion {
flex-direction: column; /* apila contenido e imagen */
align-items: center;
}
}

  1. Texto responsivo con ancho relativo

Define .presentacion__contenido al 50% del padre (y limita la medida de línea para legibilidad):

.presentacion__contenido {
width: 50%;
max-width: 65ch; /* opcional: ancho óptimo de lectura */
}

En móvil, deja que el texto use todo el ancho:

@media (max-width: 720px) {
.presentacion__contenido {
width: 100%;
max-width: 65ch; /* sigue limitando la línea */
}
}

  1. Enlaces de navegación más flexibles (ancho relativo)

Si tus “botones” de enlaces viven en .presentacion__enlaces__link, dales un 50% y céntralos con Flex:

.presentacion__enlaces__link {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
gap: 16px; /* espacio icono-texto */
text-decoration: none;
padding: 14px 20px;
border: 2px solid #22D4FD;
color: #F6F6F6;
border-radius: 8px;
background: #1d1d1d;
}

/* móvil: que ocupen todo el ancho disponible */
@media (max-width: 720px) {
.presentacion__enlaces__link {
width: 100%;
}
}

Checklist de prueba rápida

A 720px la imagen y el texto ocupan cada uno ~50% (o 100% en móvil si aplicó la media query).

Los enlaces (botones) responden al ancho y mantienen legibilidad/tamaño de toque.

No hay desbordes horizontales; max-width:100% en imágenes está funcionando.

La medida de línea del texto (~45–75 caracteres) se mantiene cómoda con max-width:65ch.

1 respuesta

Hola David, espero que estés bien

Sugerencia: compartir tu proyecto en el canal #comparta-tu-codigo en el servidor ONE en Discord ;)

Gracias por compartir tu ejercício práctico con nosotros, en este momento no veo puntos de mejora! Tu contribución es fundamental para el crecimiento de nuestra comunidad en Alura. Sigue comprometido y no dudes en regresar al foro en caso que tengas alguna duda o dificultad.

¡Continúa con sus estudios y éxito en su carrera!

¡Abrazos y buenos estudios!

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