Can anyone suggest an efficient way to design the following layout with responsiveness in mind?
I attempted to divide the elements into sections and applied the transform property, but I encountered difficulties when trying to style the boxes on either side. I am uncertain if this layout is optimal and compatible across various devices.
How would you approach solving this issue?
Computer Layout:
https://i.sstatic.net/LcwX0.png
Responsive Phone Layout:
https://i.sstatic.net/VjtyY.png
This is my current script that still needs improvement:
.page-4 {
width: 100vw;
background-color: #ffd9d2;
z-index:3;
min-height: 100vh;
}
.page-4 .box {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.page-4 .box .group {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.left {
float: left;
max-width: 50%;
}
.right {
float: right;
max-width: 50%;
}
.group:after {
content:"";
display: table;
clear: both;
}<div class="page-4">
<div class="box">
<div class="group">
<div class="left">
<div class="page-4-heading">TEXT1</div>
</div>
<div class="right">
<div class="page-4-text">TEXT2</div>
</div>
</div>
</div>
</div>