My current project involves using Bootstrap 4's Jumbotron to enhance the design of a landing page. Within the jumbotron, I have added standard headings and paragraphs along with two call-to-action buttons. To ensure proper positioning on desktop screens, I enclosed these elements in a div. However, upon resizing the window, the contents spill out of the jumbotron, disrupting the overall appearance of the page.
Below is how the layout appears on a desktop:
https://i.sstatic.net/AVziH.jpg And here is how it looks on "mobile":
https://i.sstatic.net/Ij9NS.jpg I hope the images provide a clear understanding of the issue. While the background image of the jumbotron adjusts responsively, the text and buttons overflow downward as the screen size decreases.
Here is the relevant HTML code snippet:
<div class="jumbotron jumbotron-fluid">
<div class="jumboContents">
<h1 class="display-3">Welcome to Other Mother!</h1>
<p class="lead">Scroll Down To See Whats On Offer</p>
<hr class="my-4">
<p>Click Below To Start Shopping or Make a Request Instantly</p>
<p class="lead">
<a class="btn btn-info btn-lg" href="#" role="button">Shop Now</a>
<a class="btn btn-info btn-lg" id="contactBtn" href="#" role="button">Contact OM</a>
</p>
</div>
</div>
Additionally, here is the relevant CSS code snippet:
.jumbotron {
position: relative;
top: -170px;
height: 100vh;
background-image: url(images/homepg.jpg);
background-size: 100% 100%;
margin: 0 auto;
color: white;
z-index: -1;
}
.jumboContents {
position: relative;
top: 30%;
left: 30%;
}