In the design, there is a block that should be positioned absolutely on desktop screens. However, for mobile screens, it needs to adapt so that elements do not overlap.
.wrapper {
position: relative;
border: 2px solid black;
border-radius: 10px;
padding: 20px 0 0 20px;
height: 250px;
}
.text {
max-width: 300px;
margin-bottom: 20px;
}
.button {
width: 50px;
border: 1px solid black;
border-radius: 10px;
cursor: pointer;
padding: 10px 15px;
margin-bottom: 15px;
}
.block {
position: absolute;
width: 200px;
background: purple;
bottom: 0;
right: 0;
z-index: 2;
padding: 10px 15px;
}
@media only screen and (max-width: 767px) {
.block-wrapper {
display: flex;
justify-content: flex-end;
}
.block {
position: relative;
}
}<div class="wrapper">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="button">Button</div>
<div class="block-wrapper">
<div class="block">
<div class="block-name">Hector</div>
<div class="block-position">Developer</div>
</div>
</div>
</div>If the block must always have an absolute position, then with long text and a small screen size, it may overlap with the button.
Therefore, for smaller screens, I need to adjust the layout so that the elements stack vertically.
I've used flex display to push this block to the right, but how can I ensure it remains at the end of the entire wrapper?