I am currently facing an issue where two div elements (`.left` and `.right`) are not displayed vertically when the width value is less than 800px. Strangely, the `.left` div disappears when I try to adjust the width. I have shortened the code for clarity.
Does anyone have any insights into why this is happening and how I can resolve it?
Here is the code snippet:
* {
box-sizing: border-box;
}
body {
color: white;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #282C34;
}
.right {
right: 0;
background-color: #616161;
}
.centered {
position: absolute;
width: 100;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.container {
position: relative;
border-style: solid;
border-color: #92a8d1;
background-color: #92a8d1;
}
@media screen and (max-width:800px) {
.left,
.right {
width: 100%;
/* The width is 100%, when the viewport is 800px or smaller */
}
}<div class="split left">
<div class="centered">
<center>
<div class="container">
<div class="middle">
<div class="text">
<a></a>
</div>
</div>
<div class="information">
<h2>asd</h2>
</div>
</div>
</center>
</div>
</div>
<div class="split right">
<div class="centered">
<center>
<div class="container">
<div class="middle">
<div class="text">
<a></a>
</div>
</div>
<div class="information">
<h2>fgh</h2>
</div>
</div>
</center>
</div>
</div>Any help or suggestions would be greatly appreciated!