I am struggling to make these two images responsive on mobile view using CSS. I can't seem to figure it out, and it's really frustrating me.
What I'm trying to achieve is to have the two images not directly on top of each other, but rather one slightly overlapped on the other. It's hard to explain, but I hope someone can assist me in solving this issue.
.content__stacking {
display: flex;
width: 100%;
justify-content: center;
}
.stacking1 {
height: 370px;
width: 100%;
position: relative;
background-color: #fbf9f6;
padding-left: 5px;
}
.stacking2 {
position: absolute;
z-index: 1;
left: 1050px;
top: 100px;
width: 100%;
}
.parent {
position: relative;
/*top: -220px;
left: -900px;*/
}
.image1 {
position: relative;
top: -20px;
left: -20px;
border: 1px solid #000000;
}
.image2 {
position: absolute;
top: 100px;
left: 100px;
border: 1px solid #000000;
}<div class="content__stacking">
<div class="stacking1">
<div class="stacking2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Quos natus, corrupti vitae assumenda veritatis consectetur
<br>debitis corporis ex odit iste voluptates rerum omnis animi ullam itaque.
<br>Quis quam facilis facere?</p>
<br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
<br>Sunt unde reiciendis quod deserunt officia quos consequatur laborum ea amet quo.</p>
</div>
</div>
<div class="parent">
<img class="image1 img-responsive" src="https://placekitten.com/200/300" alt="">
<img class="image2 img-responsive" src="https://placekitten.com/200/300" alt="">
</div>
</div>