How can you adjust the arrow placement to be at the bottom of the full-height container just before the fold?

Is there a way to position the arrow at the bottom of the container? I'm using Bootstrap-5 and struggling with getting the right positioning attributes. The arrow keeps sticking with the other text content. Any tips or guidance on how to achieve this would be greatly appreciated.

Thank you for helping out 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13717c7c67606761726353263d233d21">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efcf1f1eaedeaecffeeb3f7fdf1f0eddeafb0a6b0ae">[email protected]</a>/font/bootstrap-icons.css">

    <section class="hero" id="hero">
      <div class="heroText container">

       
        <h1 class=" text-white">TITLE OF MY PAGE</h1>
        <h3 class="subtitle fancy hidden-phone text-white"><span>SUBTITLE</span></h3>
        <a href="#events" class="mx-auto text-center position-absolute bottom-0 mb-2 hidden-phone"><i class="bi bi-arrow-down-short"></i></a>
      </div>

      <div class="videoWrapper">
        <img src="https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ" class="custom-video">
      </div>
      <div class="overlay"></div>
    </section>

htmlcssbootstrap-5

Answer №1

Here's a suggestion: consider enclosing the arrow in its own container.

The reason why your arrow couldn't be placed at the bottom is because you needed to specify .heroText { height: 100%; ... }, but this would affect the vertical centering of your title and subtitle.

Check out the code snippet below for reference.

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b6bbbba0a7a0a6b5a494e1fae5fae5">[email protected]</a>/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
  <script src='https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4d6dbdbc0c7c0c6d5c4f4819a859a85">[email protected]</a>/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>

</head>

<body>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f6fbfbe0e7e0e6f5e4b9fdf7fbfae7d4a5baacbaa4">[email protected]</a>/font/bootstrap-icons.css">

  <section class="hero" id="hero">
    <div class="heroText container">
      <h1 class="text-white">TITLE OF MY PAGE</h1>
      <h3 class="subtitle fancy hidden-phone text-white"><span>SUBTITLE</span></h3>
    </div>

    <div class="videoWrapper">
      <img src="https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ" class="custom-video">
    </div>
    <div class="overlay"></div>
    <div id="wrapper" class='d-flex justify-content-center'>
      <a href="#events" class="mx-auto text-center position-absolute bottom-0 mb-2 hidden-phone"><i class="bi bi-arrow-down-short"></i></a>
    </div>
  </section>

</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reorganize a list based on another list without generating a new list

Among the elements in my HTML list, there are items with text, input fields, and tables. I also have a specific order list like [3,1,2,0]. Is it feasible to rearrange the items in the HTML list on the page based on this order list without generating a new ...

javascripthtmljquerycss

Font Awesome icons occasionally display as squares, but typically they render correctly

I've noticed a strange issue on my website where the font awesome icons sometimes display as squares instead of their intended design. After searching through forums, it seems that my situation is different from others experiencing similar problems. I ...

cssfont-awesome

Utilize CSS styling for elements persistently, even following a postback event triggered by

In my asp.net app, I have multiple hrefs with dynamic Ids that all share the same CssClass called MyClass. I am looking to hide these buttons based on a certain condition. Initially, I used the .ready function: $(document).ready(function() { if(condit ...

asp.netjquerycss

What types of events can be used to trigger the start of HTML5 audio playback in mobile Chrome?

When it comes to mobile browsers, Audio elements require user action before play can start. The click event usually satisfies this requirement, but touchstart doesn't seem to be an acceptable initiating event in Chrome on Android or iOS. (Refer below ...

javascriptandroidioshtmlaudio

Is there a way to arrange list items to resemble a stack?

Typically, when floating HTML elements they flow from left to right and wrap to the next line if the container width is exceeded. I'm wondering if there's a way to make them float at the bottom instead. This means the elements would stack upward ...

javascripthtmlcss

What CSS property prevents a fixed header from overlapping a scrolled element?

After creating a fixed header for my HTML table, I noticed that as I scroll down the page, everything is being overlapped by the fixed header except for one slider (noUiSlider). I am curious to know which CSS property is preventing the header from overlayi ...

javascriptjqueryhtmlcss

How can I eliminate the scrollbar from appearing on all browsers when visiting my website?

I've encountered an issue while building my portfolio with React.js. I'm having trouble removing the scrollbar. I've attempted using overflow: hidden for the parent element and overflow: scroll for the child div, but it's not producing ...

javascriptcssreactjssass

Automating item selection using Selenium in Python

Currently, I am in the process of developing a software program to automate web database management. However, I have encountered an issue while trying to manipulate a table where I need to arrange the items based on one of the columns by clicking on the co ...

pythonhtmlseleniumhtml-tablewebdriver

Tips for positioning the overlay to match the icon list when hovering- JavaScript/Cascading Style Sheets (CSS)

My challenge involves a list of <li>'s accompanied by an icon that, when hovered over, displays an overlay containing information about the 'test'. The setup looks something like this: test1 test2 test3 and so forth.... Here' ...

javascriptjqueryhtmlcss

Can custom HTML elements be designed to function similarly to standard ones?

What is the best way to create a custom HTML element that functions as a link without relying on inline Javascript? For instance: <x-button href="...">...</x-button> Can I develop an element like <x-button> that can accept an attribute ...

javascripthtml

PHP Debate: Static vs Non-Static - Which is the Superior Choice?

Static and non-static functions as well as class properties really had me puzzled when I attempted to launch my website. Could someone clarify whether it is preferable to have the entire website coded using static functions rather than relying on non-stat ...

phphtml

Python Application Engine - Streamlining Responses from HTML Control Arrays

In my attempt to use App Engine (Python), I am facing a challenge in sending POST values from a variable array of select controls within an HTML form. Each select control is associated with a text describing what the user is rating. For instance, let&apos ...

pythonhtmlgoogle-app-enginepost

The appearance of Recaptcha buttons is unattractive and seemingly impossible to

Let me start by saying that I have already looked into the issue of "Recaptcha is broken" where adjusting the line-height was suggested as a solution. Unfortunately, that did not work for me. After implementing Google's impressive Recaptcha on my web ...

javascripthtmlcssrecaptcha

Is it possible for JavaScript to access and read a local file from a web page hosted locally

I am interested in using html, css, and javascript to develop a user interface for configuring a simulation. This interface will be used to generate a visualization of the simulation and an output parameters file based on multiple input files. It is impor ...

javascriptfilelocalhtml

Issue with Flask app's template rendering when trying to search for a book

Currently, I am working on a Flask web application that has the functionality for users to search for books and view detailed information about them. However, an obstacle I am encountering is that the form does not get sent to the specified URL. Below is ...

htmlflask

What are the recommended best practices for managing Visual States in .NET Maui Blazor Hybrid applications?

What is the recommended approach for managing Visual States based on platform (Android/iOS), orientation (Portrait/Landscape), and device type (Phone/Tablet) in .NET Maui Blazor Hybrid, similar to how .NET Maui utilizes the Visual State Manager in xaml fil ...

bootstrap-5mauiblazor-hybrid

Retrieve the following element by using the absolute xpath

I am currently working on my dashboard and there is a specific value that I need to retrieve. After some trial and error, I managed to use the following code https://i.sstatic.net/2lnzk.png Here is the code snippet used to obtain the xpath: driver.find_e ...

pythonhtmlselenium

I would like to know how to create a dropdown menu that shows the country name, flag, and code based on the

I have successfully generated the telephone input field. One requirement is to display the Country flag along with the country name as soon as the dropdown is selected. Another requirement is that once the country is selected, it should display the countr ...

javascripthtmlcss

The execution of the selenium script is unreliable

Recently, I created a selenium script to automate certain manual checks on http:obsessory.com. The script utilizes a looping concept, such as mouse hovering over the Top menu and clicking on various submenus. However, during testing, I have encountered spo ...

htmlselenium

Retrieve the second offspring of a jQuery selection

I have searched extensively for a solution to this question, but haven't come across anything helpful. Here is the code snippet I am struggling with: $("table tbody tr").hover( function() { var secondCell = $(this).children[1].textContent; ...

jqueryhtmlthiselement