2

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Busco que la wave no se pare encima del texto, sino que si el texto llega a su lugar, esta se vaya mas abajo así no se superponga... o lo que encuentren más conveniente. Intenté ponerlo dentro de un div y darle margin-top, tambien lo hice con el div del texto: darle margin-bottom, entre otras cosas que no funcionaron, entre otras cosas que no funcionaron, entre otras cosas que no funcionaron.

ARCHIVO CSS:

/********Waves*********/

/*arreglar wave*/

.banner{
    background: linear-gradient(rgba(250, 67, 71, 0.8), rgba(250, 67, 71, 1)), url("https://images.contentstack.io/v3/assets/blt187521ff0727be24/bltc6e788b11a9c8245/60ee0f71a86d0f5a0be449a3/MissFortune_0.jpg");
    height: 100vh;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    position:relative; /*?*/
} 

.banner .waves{
    position: absolute;
    bottom:0;
    width: 100%;
    left:0;
}


/********Text*********/

h1, h2{
    color: #3b2e42;
    font-family: 'Montserrat', sans-serif;
}

h1{
    font-size:4.5rem;
}

h2{
    font-size:2.5rem;
}


/********Profile picture*********/

.profile-pic{
    width: 43vh;
    height: 43vh;
    margin-top: 10vh;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
}
  
.profile-pic img{
    width: auto;
    height: 100%;
}

ARCHIVO HTML:

<header class="banner">
    
    <div class="container-fluid text-center">
      <div class="profile-pic">
        <img 
        src="https://64.media.tumblr.com/8c4f60b89afc2d206ec9fef93558e985/94356f32c2506702-ba/s500x750/3809cb778e4e8cf867f1e6bb233b98e9fc1f98aa.jpg" 
        alt="profile picture"/> <!--rellenar dato-->
      </div>
      <h1>MISS FORTUNE</h1>  <!--rellenar dato-->
      <h2>Desarrolladora Web Full-Stack Jr.</h2>  <!--rellenar dato-->
    </div>
    <div class="wave">
      <svg class="waves"
        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#3b2e42" fill-opacity="1" d="M0,128L80,160C160,192,320,256,480,234.7C640,213,800,107,960,96C1120,85,1280,171,1360,213.3L1440,256L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
      </svg>
    </div>
</header>

Utilicé Bootstrap.

-----PROBANDO RESPUESTAS:-----

<svg class="waves fixed-bottom position-relative"...</svg>

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

Y si le agrego .banner{ height: 115vh; }

introducir la descripción de la imagen aquíintroducir la descripción de la imagen aquí

4
  • Intentaste con svg: class="waves fixed-bottom position-relative" ?
    – René
    Commented el 16 abr. 2023 a las 3:50
  • 1
    @René acabo de probarlo y subí mis resultados, casi! siento que tengo que modificarle algo y a lo mejor funciona
    – Carolina
    Commented el 16 abr. 2023 a las 4:39
  • Buen día, puedes adjuntar tu HTML y CSS completo?... recuerda que es mejor adjuntar un ejemplo mínimo, completo y verificable. Commented el 16 abr. 2023 a las 5:30
  • @Cris223511.dev listo, actualicé el css. el html está completo, no tiene el !doctype y eso porque es un componente de angular. ademas recuerden que uso bootstrap.
    – Carolina
    Commented el 16 abr. 2023 a las 13:45

1 respuesta 1

1

Como la posición del waves es absolute, los textos (en resoluciones pequeñas) no van a poder empujar al elemento waves hacia abajo porque tiene una posición fija y es absoluta, haciendo que el texto esté detrás del waves:

.banner .waves{
  position: absolute;
  bottom:0;
  width: 100%;
  left:0;
}

Solo dejemos que el elemento sea relativo para que los elementos no se desborden y no estén uno encima del otro:

.banner .waves {
  position: relative;
}

Y el problema también sucedía por la altura fija del banner, tiene solo un alto de 100vh, por la cual, en resoluciones pequeñas, ese alto seguirá siendo 100vh y tus elementos se desbordarán fuera del banner, solo indiquemos que ocupe el máximo contenido que pueda (con max-content), así nunca se va a desbordar sus elementos y a que banner ocuparía el alto máximo posible:

.banner {
  background: linear-gradient(rgba(250, 67, 71, 0.8), rgba(250, 67, 71, 1)),
    url('https://images.contentstack.io/v3/assets/blt187521ff0727be24/bltc6e788b11a9c8245/60ee0f71a86d0f5a0be449a3/MissFortune_0.jpg');
  /* height: 100vh; */
  height: max-content;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
}

Código completo:

/********Waves*********/

/*arreglar wave*/

.banner {
  background: linear-gradient(rgba(250, 67, 71, 0.8), rgba(250, 67, 71, 1)),
    url('https://images.contentstack.io/v3/assets/blt187521ff0727be24/bltc6e788b11a9c8245/60ee0f71a86d0f5a0be449a3/MissFortune_0.jpg');
  height: max-content;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative; /*?*/
}

.banner .waves {
  position: relative;
}

/********Text*********/

h1,
h2 {
  color: #3b2e42;
  font-family: 'Montserrat', sans-serif;
}

h1 {
  font-size: 4.5rem;
}

h2 {
  font-size: 2.5rem;
}

.titulos {
  text-align: center;
}

/********Profile picture*********/

.imagen {
  display: flex;
  justify-content: center;
}

.profile-pic {
  width: 43vh;
  height: 43vh;
  margin-top: 10vh;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
}

.profile-pic img {
  width: auto;
  height: 100%;
}
<header class="banner">

  <div class="container-fluid text-center">
    <div class="imagen">
      <div class="profile-pic">
        <img 
             src="https://64.media.tumblr.com/8c4f60b89afc2d206ec9fef93558e985/94356f32c2506702-ba/s500x750/3809cb778e4e8cf867f1e6bb233b98e9fc1f98aa.jpg" 
             alt="profile picture"/> <!--rellenar dato-->
      </div>
    </div>
    <div class="titulos">
      <h1>MISS FORTUNE</h1>  <!--rellenar dato-->
      <h2>Desarrolladora Web Full-Stack Jr.</h2>  <!--rellenar dato-->
    </div>
  </div>
  <div class="wave">
    <svg class="waves"
         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#3b2e42" fill-opacity="1" d="M0,128L80,160C160,192,320,256,480,234.7C640,213,800,107,960,96C1120,85,1280,171,1360,213.3L1440,256L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
    </svg>
  </div>
</header>


Puedes ver mejor los resultados en éste enlace.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.