Using Bootstrap 4, the .top block should span 100% width and the full height of the screen. The .top-title should be centered on the screen, while the .btn-scroll-down should appear at the bottom of the screen.
The desired page layout can be viewed at this link: https://i.sstatic.net/2nfqQ.png
HTML
<!-- top -->
<div class="top js-top">
<div class="container h-100">
<div class="row h-100">
<div class="col-lg-12">
<h1 class="top-title">
<span class="top-title-1">text</span>
<span class="top-title-2">title</span>
<span class="top-title-3">text</span>
</h1>
<a href="" class="btn-redirect link-go-to-match">go</a>
<a href="#" class="btn-scroll-down js-btn-scroll-down"></a>
</div>
</div>
</div>
</div>
<!-- /top -->
CSS
.btn-redirect {
display: block;
width: 301px;
height: 57px;
/* Remaining CSS properties here... */
}
.btn-scroll-down {
position: absolute;
/* Remaining CSS properties here... */
}
.top
{
overflow: hidden;
height: 100%;
min-height: 100%;
/* Remaining styles here... */
}
.top .top-title
{
/* Remaining styles here... */
}
/* Additional CSS classes omitted for brevity */
However, on smaller screens, the .btn-redirect overlaps with other text elements as shown in this image: https://i.sstatic.net/1N7f6.png
Efforts to use Bootstrap 4's flex properties have not been successful in resolving the issue. Is there an alternative method to achieve the desired layout?