Position the arrow at the bottom of the full-height container before the fold?-CodePudding

How can I position the arrow at the bottom of the container? I'm using Bootstrap-5 and just can't figure out all the position attributes for the life of it. It just sticks with the other text so far. I have tried a variety of things, but some guidance how to go about this would be great.

Thanks for taking the time to help a beginner. :)

.hero {
    position: relative;
    overflow: hidden;
  }
  
  @media screen and (min-width: 992px) {
    .hero {
      height: 100vh;
    }
  
    .custom-video,
    .news-detail-image {
      object-fit: cover;
      width: 100vw;
      height: 100vh;
    }
  
    .sticky-wrapper {
      position: relative;
      bottom: 76px;
    }
  }
  
  .heroText {
    position: absolute;
    z-index: 9;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    text-align: center;
  }

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    z-index: -100;
  }
  
  .custom-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

    <section  id="hero">
      <div >

       
        <h1 >TITLE OF MY PAGE</h1>
        <h3 ><span>SUBTITLE</span></h3>
        <a href="#events" ><i ></i></a>
      </div>

      <div >
        <img src="https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ" >
      </div>
      <div ></div>
    </section>

CodePudding user response：

Here you go... I suggest you to wrap the arrow in a separate container.

The reason why your arrow couldn't be positioned at the bottom was that you should have set .heroText { height: 100%; ... }, but then your title and subtitle wouldn't be vertically centered.

See the snippet below.

.hero {
  position: relative;
  overflow: hidden;
}

@media screen and (min-width: 992px) {
  .hero {
    height: 100vh;
  }
  .custom-video,
  .news-detail-image {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
  }
  .sticky-wrapper {
    position: relative;
    bottom: 76px;
  }
}

.heroText {
  position: absolute;
  z-index: 9;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  text-align: center;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
  z-index: -100;
}

.custom-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#wrapper {
  width: 100%;
}

<!DOCTYPE html>
<html lang='en'>

<head>

  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv l9liuYLaMQ/' crossorigin='anonymous'></script>

</head>

<body>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

  <section  id="hero">
    <div >
      <h1 >TITLE OF MY PAGE</h1>
      <h3 ><span>SUBTITLE</span></h3>
    </div>

    <div >
      <img src="https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ" >
    </div>
    <div ></div>
    <div id="wrapper" class='d-flex justify-content-center'>
      <a href="#events" ><i ></i></a>
    </div>
  </section>

</body>

</html>