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

Pregunta sobre la acomodación del texto

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

en la pág sobre mí el texto se estira no sé porque pero en la pestaña home si se aplica correctamente la distribución

Mi Css:
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
padding: 0;
margin: 0;
}

body {
background-color: #000000;
color: #F6F6F6;
box-sizing: border-box;
}
.header{
padding: 2% 0% 0% 15% ;
}
.header_menú{
display: flex;
gap: 80px;
}
.header_menú_botón{
font-size: 24px;
font-family: "Montserrat", sans-serif;
font-weight: 600;
color: #22D4FD;
text-decoration: none;

}
.presentación{
display: flex;
align-items: center;
padding: 6% 15%;
justify-content: space-between;
}
.contenido_presentación{
max-width: 615px;
width: 100%;
display: flex;
flex-direction: column;
gap: 40px;
}
.destaco_título{
color: #22D4FD;
}
.presentación_contenido_título{
font-size: 36px;
font-family: "krona One","sans-serif" ;
}
.presentación_contenido_párrafo{
font-size: 24px;
font-family: "Montserrat", sans-serif;
}
.presentación__enlaces{
display: flex;
gap: 32px;
justify-content: space-between;
flex-direction: column;
align-items: center;
}
.presentación__enlaces_link{
width: 378px;
text-align: center;
padding: 21.5px;
border-radius: 8px;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: 600;
text-decoration: none;
color: #F6F6F6;
border: 2px solid #22D4FD;
display: flex;
justify-content: center;
gap: 10px;
}
.imagen{
width: 700px;
height: 550px;
padding: 6%;
border-radius: 160px;
}
.presentación__enlaces_subtítulo{
font-family: "krona One","sans-serif" ;
font-size: 24px;
font-weight: 400;
}
.presentación__enlaces_link img {
width: 32px;
height: 32px;
object-fit: contain;
}
.presentación__enlaces_link:hover{
background-color: #272727;
}
.footer{
background-color: #22D4FD;
padding: 24px;
color: #000000;
text-align: center;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: 400;
}

1 respuesta

Hola Patrick, espero que estés bien

Parece que el problema con la distribución del texto en tu página "Sobre mí" podría estar relacionado con el uso del flexbox y cómo se están aplicando las clases CSS. Aquí tienes algunas sugerencias para investigar y ajustar:

  1. Verificar el HTML: Asegúrate de que el HTML de la página "Sobre mí" esté utilizando las mismas clases que la página de inicio. Esto incluye las clases presentación, contenido_presentación, presentación_contenido_título, y presentación_contenido_párrafo.

  2. Revisar el CSS: Verifica si hay diferencias en el CSS que se aplica a ambas páginas. Asegúrate de que las clases mencionadas anteriormente estén correctamente aplicadas y no haya estilos adicionales que puedan estar afectando la distribución.

  3. Flexbox: La clase .presentación está utilizando display: flex; y justify-content: space-between;. Esto puede estar causando que el contenido se estire para ocupar todo el espacio disponible. Si esto no es lo que deseas, podrías intentar cambiar justify-content a flex-start o ajustar el max-width de los elementos internos para controlar mejor el espacio.

  4. Prueba de cambios: Intenta hacer pequeños cambios incrementales y revisa cómo afectan el diseño. Por ejemplo, cambia el max-width de .contenido_presentación o ajusta los padding y margins para ver si mejora la distribución.

  5. Herramientas de desarrollo: Utiliza las herramientas de desarrollo del navegador (como el Inspector de Elementos) para ver cómo se están aplicando los estilos y hacer pruebas en tiempo real.

Espero que estas sugerencias te ayuden a resolver el problema. ¡Bons estudios!