1

Блоки с текстом наслаиваются друг на друга, когда открываю с телефона. При этом на компьютере все нормально, вне зависимости от размера окна.

.preloader {
  width: 100%;
  height: 100%;
  margin-top: -70px;
  position: fixed;
  justify-content: center;
  align-items: center;
  z-index: 10;
  background-color: rgba(255, 255, 255, .97);
}

.preloader>.load {
  width: 50px;
  height: 50px;
  border: 5px solid #cccccc;
  border-top-color: #36f075;
  border-radius: 100%;
  animation: rotate 2s infinite cubic-bezier(0, .1, .9, 1);
}

.modal {
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 9;
  background-color: rgba(51, 51, 51, .9);
}

.modal>.cont {
  width: 1100px;
  min-width: 75%;
  max-width: 90%;
  height: 80%;
  flex-direction: column;
  overflow: hidden !important;
  background-color: #ffffff;
  animation: modal .7s ease-in-out;
}

.modal>.cont>.preloader {
  min-width: 100%;
  min-height: 100%;
  margin-top: 0;
  position: relative;
}

.modal>.cont>section {
  width: 100%;
  padding: 15px;
  display: none;
  justify-content: space-between;
  align-items: center;
  background-color: #69da86;
  color: #ffffff;
}

.modal>.cont>section>h1 {
  display: flex;
  text-align: center;
  font-size: 26px;
}

.modal>.cont>section>button {
  width: 25px;
  height: 25px;
  border: none;
  font-size: 24px;
  background-color: transparent;
  color: #ffffff;
}

.modal>.cont>section>div {
  width: 25px;
}

.modal>.cont>main {
  padding: 25px;
  flex-direction: column;
}

.modal>.cont>main>section {
  margin-bottom: 25px;
  flex-direction: column;
}

.modal>.cont>main>section>* {
  margin: 7px 0;
}
<div class="modal">
  <main class="cont">
    <div class="preloader">
      <div class="load"></div>
    </div>
    <section>
      <div></div>
      <h1>Lorem ipsum</h1>
      <button>x</button>
    </section>
    <main>
      <section>
        <h2>Subtitle</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, dignissimos asperiores fugiat deleniti, libero veritatis quod voluptatum dolorum facere expedita vitae quam. Dolorum optio culpa amet, nostrum, pariatur laudantium earum sint? Provident
          temporibus animi placeat atque earum magni quis repudiandae, doloremque ducimus odio aspernatur molestiae quasi nemo tenetur, dolorem, eius, esse amet! Obcaecati sit mollitia earum possimus omnis at corporis nisi quasi ipsam laudantium molestias,
          eaque recusandae ratione blanditiis beatae ipsa vitae, voluptates assumenda, error! Ipsum non consequatur enim sed, quia et culpa dicta dolores voluptatem, quibusdam quos, necessitatibus maiores ipsam accusamus. Commodi officiis fuga laboriosam
          velit alias quod tenetur!</p>
      </section>
      <section>
        <h2>Subtitle</h2>
        <p>Ratione et at, earum officia. Aut at deleniti porro iure expedita sint ad ratione quam quo. Quis quod accusantium esse eaque incidunt qui! Incidunt architecto modi, quod quas esse obcaecati voluptate expedita, nobis magni nostrum pariatur? Nihil
          quasi, vel iure fugiat veniam doloribus qui numquam iusto. Possimus cupiditate repellat dolores voluptatem. Illo quidem, eligendi, dolor tempora id et eos eius sit, rem ipsam, quibusdam fugiat. Excepturi, ullam veritatis nobis laborum asperiores
          labore iusto ratione deleniti fugiat porro illum autem soluta nisi iste praesentium possimus saepe officiis quis tempore. Officia aspernatur alias quis reprehenderit animi iusto pariatur eius dolorem voluptatibus quas!</p>
      </section>
    </main>
  </main>
</div>

Вот здесь рабочий пример. Нужно нажать на кнопку "подробнее" в списке "информация от тренингах".

На телефоне На компьютере

2
  • Добавьте рабочий пример с ошибкой в вопрос.
    – E_K
    7 дек 2018 в 16:12
  • @E_K , Добавил. 7 дек 2018 в 16:41

2 ответа 2

0
  1. Вы своим body * {display: flex;} ломаете поведение всех блоков что и приводит к такому, не надо так делать. Вам не нужен flex на всех элементах.
  2. На странице должен быть один элемент main.
  3. Что бы исправить проблему при текущей верстке добавьте для .modal > .cont > main свойство flex-flow: row wrap;
0

В дополнение к ответу @E_K: вы можете также добавить к .modal > .cont > main свойство overflow-y: auto;, чтобы появлялся скролл в случае, когда текст не помещается в модальном окне

Спасибо CbIPoK2513 за поправку

2
  • Чтобы скролл появлялся в случае, когда текст не помещается, нужно свойство overflow-y: auto. При свойстве overflow-y: scroll - скролл будет всегда.
    – De.Minov
    7 дек 2018 в 19:29
  • 1
    Да, пардон, конечно, overflow-y: auto лучше 7 дек 2018 в 20:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.