Использование такого же высокого значения с для адаптивного веб-дизайна - PullRequest
Новая
       18

Использование такого же высокого значения с для адаптивного веб-дизайна

0 голосов
/ 04 июня 2019

Привет, я работаю в PWA (Progressive Web App).Это должно быть доступно не только для мобильных телефонов.Экран ноутбука должен использовать это тоже.Я работаю с макетом сетки.Посмотрите сами ... Это прекрасно работает.
enter image description here
Но когда я использую его для более высокой ширины экрана, информационный текст второго окна получает три строки.Мой код выглядит так: 

.challenge_box {
  padding: 20px;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: repeat(2, auto);}
}

.challenge {
  position: relative;
  margin: 0 auto;
  height: auto;
  width: 90%;
}

.wrap_challenge {
  min-height: 400px;
  min-width: 90%;
  background-color: #fff;
  border-radius: 15px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.wrap_challenge h2 {
  padding: 20px;
  background-image: linear-gradient(to right, #141e30, #243b55);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.wrap_challenge label {
  padding: 0px 20px 20px 20px;
  text-align: center;
  color: #5f6368;
}

.wrap_challenge textarea {
  margin: 0px 20px 20px 20px;
  width: 80%;
  height: 220px;
  border-radius: 15px;
  outline: none;
  resize: none;
  padding: 7px;
}
<div class="challenge_box">
        <div class="challenge">
          <div class="wrap_challenge">
            <h2>LOGO CHALLENGE</h2>

            <label>Gebe die Antworten nach der Reihe an und setzte zwischen jede ein Komma.</label>
            <textarea id="challenge_logo" class="challenge_div_normal" cols="200" rows="20" placeholder="bsp.: Sony, Apple,.."></textarea>

            <input type="submit" value="Abschicken" onclick="sendAnswers('challenge_logo')">
          </div>
        </div>

        <div class="challenge" style="display:flex;justify-content:center;align-items:center;">
          <div class="wrap_challenge">
            <h2>MYSTERY CHALLENGE</h2>

            <label>Gebe die Antworten nach der Reihe an und setzte zwischen jede eine deutliche Trennung.</label>
            <textarea id="challenge_mystery" class="challenge_div_normal" cols="200" rows="20" placeholder="bsp.: Himbeerbaum || Affe auf Rollschuhen, lachend ||.."></textarea>

            <input type="submit" value="Abschicken" onclick="sendAnswers('challenge_mystery')">
          </div>
        </div>

        <div class="challenge" style="display:flex;justify-content:center;align-items:center;">
          <div class="wrap_challenge">
            <label class="in_work">IN ARBEIT...</label>
          </div>
        </div>
      </div>

Как видите, высота .challenge установлена ​​на auto.Это означает, что коробка адаптируется к контенту.Тогда это выглядит так:
enter image description here
Но я хочу, чтобы каждый раз в двух полях отображалось одинаковое значение и даже адаптироваться к содержимому?Как решить мою проблему?
~ filip
...