Адаптивный дизайн - Div исчезает при изменении размера окна

Question

Просто пытаюсь заставить два элемента div (.left и .right) отображаться вертикально, когда значение ширины меньше 800px. Однако div .left исчез, когда я попытался это сделать. Я удалил некоторый контент из кода, чтобы он был коротким.

У кого-нибудь есть идеи относительно того, почему это происходит и как это исправить?

Это мой код:

* {
            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>

Спасибо за помощь!

Answer 1

* {
            box-sizing: border-box;
        }
        
        body {
            color: white;
            margin: 0;
        }
        
        .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%;
                height: 50%;
                /* The width is 100%, when the viewport is 800px or smaller */
            }
            
            .split {
               position: relative;
            }
            
            body {
              height: 100vh;
            }
        }

<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>

Answer 2

Вложите два div в оболочку div и работайте с медиа-запросами и свойством flex . Как ..

HTML:

<div class="wrapper">
    <div class="left">
        ...
    </div>
    <div class="right">
        ...
    </div>
</div>

CSS / S CSS

@media(max-width: 800px) {
    .wrapper {
        display: flex;
        flex-direction: column;
        ...
    }
}

Или Попробуйте:

<ul class="flex-container column">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>


.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;

  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.column { 
  -webkit-flex-direction: column; 
  flex-direction: column; 
  float: left;
}

.column li {
  background: deepskyblue;
}