Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Hagamos lo que se hizo en el aula

Referente al curso HTML y CSS: trabajando con responsividad y publicación de proyectos, en el capítulo Adaptando los elementos y actividad Haga lo que hicimos

por Estudiante
| 27.7k xp | 78 posts

}

.presentacion__contenido{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap:2.5rem;
}

.presentacion__contenido__titulo{
    font-size: var(--font_size_titulo);
    font-family: var(--font_titulos);
}

.presentacion__contenido__texto{
    font-size: var(--font_size_texto);
    font-family: var(--font_secundario);
}

.presentacion__enlaces{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap:2rem;
}

.presentacion__enlaces__link{
    width: 50%;
    text-align: center;
    border-radius: 0.25rem;
    font-size: var(--font_size_texto);
    font-weight: 600;
    padding: 1.34rem 0;
    text-decoration: none;
    color: var(--color_secundario);
    font-family: var(--font_secundario);
    border: 0.125rem solid var(--color_terciario) ;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
}

.presentacion__enlaces__link:hover{
    background-color: var(--color_terciario);

}

.foto_portafolio{
    width: 50%;
}

.presentacion__subtitulo{
    font-family: var(--font_titulos);
    font-size: var(--font_size_texto);
}

.about-presentacion__contenido__titulo{
    font-family: var(--font_titulos);
    font-size: var(--font_size_titulo);

}

.about-presentacion-descripcion{
    font-family: var(--font_secundario);
    font-size: var(--font_size_texto);
}
.curriculum-presentacion__contenido__titulo{
    font-family: var(--font_titulos);
    font-size: var(--font_size_titulo);
}
.presentacion__contenido_descripcion{
    font-family: var(--font_secundario);
    font-size: var(--font_size_texto);
}
.presentacion__contenido_subtitulo{
    font-family: var(--font_titulos);
    font-size: var(--font_size_titulo);
}
.presentacion__contenido_item{
    font-family: var(--font_secundario);
    font-size: var(--font_size_texto);
}
.presentacion__contenido_Certificacion{
    text-decoration: none;
    color: var(--color_terciario)
}

.presentacion__contenido_Certificacion:hover{
    color: var(--color_secundario)
}

footer{
    background-color:var(--color_terciario) ;
    padding: 1.5rem;
    font-family: var(--font_secundario);
    font-size: var(--font_size_texto);
    font-weight: 400;
    text-align: center;
    
}
1 respuesta
por Brenda Souza
| 4883.2k xp | 17616 posts
Instructor Scuba

¡Hola Estudiante, espero que estés bien!

Parece que estás trabajando en un proyecto de responsividad y necesitas ajustar algunos elementos para que se adapten mejor a diferentes tamaños de pantalla. Vamos a abordar algunos puntos clave que podrían ayudarte:

  1. Adaptación de imágenes: Asegúrate de que las imágenes tengan la clase presentacion__imagen en tu HTML. Luego, en tu CSS, define el ancho de esta clase como 50%. Esto hará que las imágenes ocupen la mitad del ancho de su contenedor padre, lo cual es esencial para la responsividad.

    .presentacion__imagen {
    width: 50%;
}

  2. Ajuste del diseño para diferentes dispositivos: Utiliza la herramienta "Inspeccionar" del navegador para simular varios tamaños de pantalla. Esto te permitirá ver cómo se comporta tu diseño en dispositivos más pequeños. Podrías necesitar ajustar márgenes y rellenos, o incluso reorganizar algunos elementos para que se vean bien en todas las pantallas.

  3. Responsividad del contenido de texto: Para el texto, asegúrate de que la clase .presentacion__contenido tenga un ancho relativo. Ya tienes definido width: 50%;, lo cual es un buen comienzo. Observa cómo se adapta el texto cuando cambias el tamaño de la pantalla y ajusta si es necesario.

  4. Enlaces de navegación: Para los enlaces, la clase .presentacion__enlaces__link debe tener un ancho relativo. Ya está definido como width: 50%;, pero asegúrate de que se vea bien en diferentes tamaños de pantalla. Puedes probar con valores diferentes si no se ajustan correctamente.

Recuerda que la clave de la responsividad es probar en diferentes dispositivos y tamaños de pantalla para garantizar una experiencia de usuario óptima. Espero que estas sugerencias te sean útiles. ¡Espero haber ayudado y buenos estudios!