My div block has text overlapping the image, and when I resize the screen, the block with the text gets smaller but stays in the same position. I want to move the block to the left side while resizing the screen so that the entire block fits on the screen.
How can I achieve this properly? Here is my current code:
.our-project-section {
margin-top: 100px;
}
.zundas-project img {
max-width: 100%;
max-height: 50%;
height: auto;
width: auto;
}
.projects-wrapper {
margin-top: 50px;
padding-bottom: 60px;
}
.project-description {
padding: 25px;
width: 50%;
height: auto;
background-color: rgba(0, 0, 0, .5);
position: absolute;
top: 50%;
right: -30%;
color: #fff;
text-align: center;
}
.project-description p {
letter-spacing: 1px;
margin-top: 20px;
}
.project-description h3 {
position: relative;
}
.project-description h3::after {
content: '';
position: absolute;
width: 80px;
height: 3px;
background: #fff;
top: 32px;
left: -85px;
right: 0;
margin: auto;
}
.project-description a {
position: relative;
top: 20px;
}<section class="our-project-section">
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="projects-wrapper">
<div class="zundas-project">
<img src="https://static.dezeen.com/uploads/2018/02/riverfront-square-michael-green-lotus-newark-new-jersey-usa-largest-timber-office-building_dezeen_2364_col_1-852x537.jpg" alt="">
<div class="project-description">
<h3>Project Name</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga id molestias enim molestiae, corporis at ad ipsum perferendis commodi dicta dolorem ea eos magnam reprehenderit quae temporibus. Animi quasi labore fugit reiciendis odit officiis
reprehenderit saepe earum.</p>
<a href="#">More Information</a>
</div>
</div>
</div>
</div>
</div>
</section>