Here is the code I am working with (also pasted below). My goal is to create a layout with two columns, where the first column features two images and the second column displays some text.
In the first column, I specifically want the first image to have a width of 70% and the second image to be positioned absolutely on top of it. The desired final result can be seen here.
What I'm aiming for is to have the second image partially overlapping the first image on all screens larger than 768px.
I've managed to achieve this partial overlap, but it's not responsive - the layout collapses when screen dimensions change.
Despite my efforts, I haven't been able to achieve the desired result.
.checkoutWrapper {
display: grid;
grid-template-columns: 50% 50%;
}
.coverIMGLast {
width: 70%;
height: 100vh;
}
/* This .phone class should dynamically position the phone image over the first image */
.phone {
position: absolute;
height: 90%;
top: 5%;
bottom: 5%;
margin-left: 18%;
}
.CheckoutProcess {
padding: 5.8rem 6.4rem;
}
.someContent {
border: 1px solid red;
}<div class="checkoutWrapper">
<img src="https://via.placeholder.com/300" class="coverIMGLast" />
<img src="https://via.placeholder.com/300/ff0000" class="phone" />
<div class="CheckoutProcess">
<Content />
</div>
</div>