I currently have a Section with four blocks of content. Along the right-hand side of the screen, there are some images (as shown in this example) that I want to position absolutely. However, I am encountering an issue where these images overlap with the text when the screen width is reduced.
Is there a solution to prevent this overlapping behavior or perhaps a more effective approach to achieve my desired layout?
The code snippet below provides an outline of what I am trying to achieve:
.content-wrapper {
position: relative;
height: 100%;
width: 100%;
margin: auto;
padding: 100px 0px
}
.content {
width: 70%;
margin: 100px 0px;
}
.place-1, .place-2, .place-3 {
position: absolute
}
.place-1 {
top: 5%;
right: 0%;
max-width: 30%
}
.place-2 {
top: 30%;
right: 5%;
max-width: 30%
}
.place-3 {
top: 65%;
right: -15%;
max-width: 30%
}<div class="content-wrapper">
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...
...convallis quam enim, sed lobortis erat vehicula sed...</p>
</div>
...
<img class="place-1" src="https://picsum.photos/500/500">
<img class="place-2" src="https://picsum.photos/400/300">
<img class="place-3" src="https://picsum.photos/700/700">
</div>