Recently, I have been exploring the Bootstrap framework as a newcomer to this technology. While working on my landing page, I encountered an issue when trying to position an image next to some text using the grid system of Bootstrap. Initially, everything seemed to be working fine until I attempted to use position: absolute and left:somePX to adjust the image placement. This caused a horizontal scroll and pushed the image out of the body of the page. How can I prevent this scrolling behavior and simply cut the image to position it as desired?
Note: Despite having applied various templates with only CSS before, I have never faced a similar problem.
Thank you for your assistance!
Below is my HTML code snippet:
/* landing */
/*this is the image style*/
.landing {
padding-bottom: 100px;
margin-right: 0;
}
.landing .right .image {
position: relative;
}
.landing .right .image .back img {
position: absolute;
left: 100px;
}
.landing .right .image .mockups {
position: absolute;
top: -100px;
left: 100px;
}
/*this is text style I don't think the problem is here but I put it*/
.landing .left {
padding-top: 80px;
padding-left: 80px;
}
.landing .left h1 {
line-height: 1.3;
margin-bottom: 20px;
}
.landing .left p {
font-size: 15px;
margin-bottom: 20px;
}
.landing .left button {}<div class="landing row">
<div class="col-md-6 left">
<div class="container">
<h1>Next generation digital banking</h1>
<p>Take your financial life online. Your Easybank account<br> will be a one-stop-shop for spending, saving,<br> budgeting, investing, and much more.</p>
<button class="btn linear" type="button">Request Invite</button>
</div>
</div>
<div class="col-md-6 right">
<div class="image">
<div class="back">
<img class="back-image img-fluid" src="images\bg-intro-desktop.svg" alt="">
</div>
<div class="front">
<img class="img-fluid mockups" src="images\image-mockups.png" alt="">
</div>
</div>
</div>
</div>