I have a hero image with a text box overlapping the hero slightly. However, when I add content below the box, it appears under the text box. While my code includes some media queries that work well, I believe there must be a way to encapsulate the hero and overlapping text box into their own section. Adding more text means adjusting all the media queries to maintain the layout, so how can I achieve this without relying on media queries?
Take a look at the code snippet below:
.shell {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
/* overlap */
.shell:before {
content: "";
background-image: url(https://i.ibb.co/x866XdV/test-hero.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
position: relative;
height: 300px;
width: 100%;
}
.shell-header {
color: #fff;
padding: 0px 20px;
}
.shell-body {
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
background-color: #fff;
max-width: 85%;
position: absolute;
top: 80%;
}
img {
width: 20%;
height: 20%;
display: block;
margin-left: auto;
margin-right: auto;
}
body {
margin: 0;
font-family: sans-serif;
}
.wrapper {
padding-top: 12rem;
}
@media only screen and (min-width: 800px) {
.wrapper {
padding-top: 8rem;
}
}
@media only screen and (max-width: 360px) {
.wrapper {
padding-top: 11rem;
}
}<div class="shell">
<div class="shell-header"></div>
<div class="shell-body">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
</div>
</div>
<div class="wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg" alt="">
</div>