I have a Section with four blocks of content. On the right-hand side of the screen, I have some images (shapes in this example), that I would place in absolute position. The issue I'm facing is that these images will move into the text when the screen width becomes smaller.
Is there a way to keep the images from doing this or maybe a better approach?
My code would look something like
.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. Sed ac convallis quam. Maecenas facilisis nisi ut scelerisque dapibus. Nulla rutrum varius arcu a pharetra. Etiam vel lobortis erat. Vestibulum lobortis commodo interdum. Etiam eu sapien erat. Suspendisse cursus quam enim, sed lobortis erat vehicula sed. Aenean suscipit eget quam sed iaculis. Integer vehicula mollis nisi eget volutpat. In eget massa vestibulum, sodales turpis nec, tincidunt leo. Curabitur ullamcorper mi eu vestibulum luctus. Proin at lacus molestie odio iaculis vehicula et rutrum erat. Integer nec ipsum nec dolor ultrices scelerisque. Maecenas pharetra lacus in efficitur scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>
</div>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac convallis quam. Maecenas facilisis nisi ut scelerisque dapibus. Nulla rutrum varius arcu a pharetra. Etiam vel lobortis erat. Vestibulum lobortis commodo interdum. Etiam eu sapien erat. Suspendisse cursus quam enim, sed lobortis erat vehicula sed. Aenean suscipit eget quam sed iaculis. Integer vehicula mollis nisi eget volutpat. In eget massa vestibulum, sodales turpis nec, tincidunt leo. Curabitur ullamcorper mi eu vestibulum luctus. Proin at lacus molestie odio iaculis vehicula et rutrum erat. Integer nec ipsum nec dolor ultrices scelerisque. Maecenas pharetra lacus in efficitur scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>
</div>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac convallis quam. Maecenas facilisis nisi ut scelerisque dapibus. Nulla rutrum varius arcu a pharetra. Etiam vel lobortis erat. Vestibulum lobortis commodo interdum. Etiam eu sapien erat. Suspendisse cursus quam enim, sed lobortis erat vehicula sed. Aenean suscipit eget quam sed iaculis. Integer vehicula mollis nisi eget volutpat. In eget massa vestibulum, sodales turpis nec, tincidunt leo. Curabitur ullamcorper mi eu vestibulum luctus. Proin at lacus molestie odio iaculis vehicula et rutrum erat. Integer nec ipsum nec dolor ultrices scelerisque. Maecenas pharetra lacus in efficitur scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>
</div>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac convallis quam. Maecenas facilisis nisi ut scelerisque dapibus. Nulla rutrum varius arcu a pharetra. Etiam vel lobortis erat. Vestibulum lobortis commodo interdum. Etiam eu sapien erat. Suspendisse cursus quam enim, sed lobortis erat vehicula sed. Aenean suscipit eget quam sed iaculis. Integer vehicula mollis nisi eget volutpat. In eget massa vestibulum, sodales turpis nec, tincidunt leo. Curabitur ullamcorper mi eu vestibulum luctus. Proin at lacus molestie odio iaculis vehicula et rutrum erat. Integer nec ipsum nec dolor ultrices scelerisque. Maecenas pharetra lacus in efficitur scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</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>