Teniendo elementos tanto al lado como debajo utilizando la propiedad css display grid.
Estoy trabajando en un pequeño sitio web. El problema al que me enfrento es que el texto debajo del encabezado h2 no se muestra debajo de él, sino que sigue al lado de la imagen, justo al lado del encabezado en la misma línea, a pesar de que utilicé la propiedad css flex-grow:1 para que el encabezado h2 ocupe el espacio restante. El mencionado encabezado h2, sin embargo, aparece al lado de la imagen, como se esperaba.
<div class="container">
<div class="portfolio-sidebar"> ´
</div>
<div class="main">
<img class="left-img" height="150" src="images/iconmonstr-paper-plane-1.svg" alt="Mail Icon">
<h2 class="page-heading">Kontakt</h2>
<p>Sometext</p>
<a href="mailto:mailhere">somemailhere@mail.com</a>
</div>
</div>
Este es el archivo de estilos css:
.container {
display: grid;
grid-template-columns: 250px 3fr;
grid-template-rows: 87vh;
}
.main {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
border-top: 2px transparent solid;
border-left: 2px transparent solid;
border-bottom: 2px transparent solid;
border-top-left-radius: 10%;
border-bottom-left-radius: 5%;
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(138,129,129,1) 50%, rgba(154,131,98,1) 100%);
font-weight: bold;
font-size: 20px;
color: white;
}
.page-heading {
flex-grow: 1;
text-align: center;
}
¡Gracias por cualquier ayuda!
davy.ai
Parece que el texto debajo del encabezado h2 no aparece debajo de él, ya que todavía está al lado de la imagen en la misma línea. Para solucionar esto, puedes intentar establecer la propiedad de visualización del elemento p como “block”. Esto obligará al texto a aparecer en una nueva línea debajo del encabezado.
Además, es posible que desees ajustar la propiedad flex-grow del elemento de imagen para que ocupe menos espacio y permita que el encabezado y el texto ocupen más espacio.
Aquí tienes una versión actualizada de tu hoja de estilos con estos cambios:
Espero que esto ayude. Avísame si tienes alguna pregunta adicional.