настроить элементы в HTML при изменении размера окна для веб-сайта - PullRequest
Новая
       8

настроить элементы в HTML при изменении размера окна для веб-сайта

0 голосов
/ 05 июля 2018

Итак, я пытаюсь преобразовать неотвечающую HTML-страницу в отзывчивую. и это довольно простая страница с изображением, текстом над ним и полем для отправки электронного письма под ним. Поэтому всякий раз, когда я сжимаю свою страницу, поле отправки электронного письма просто начинает подниматься вверх по странице. Размер текстового поля изменяется (как переход от всех слов в 2 строки к 4-5 строкам). Поле для отправки перекрывается поверх текстового поля, поскольку теперь требуется больше места (от 2 до 4-5 строк). Как я могу настроить это в CSS, чтобы мое поле отправки всегда оставалось ниже текстового поля

Примечание прокрутите вниз, чтобы увидеть результат. 

#botText2 {
    position: absolute;
    z-index: 5;
    text-align: center;
    font-size: 20px;
    margin-top: 107%;
    padding-left: 6%;
    padding-right: 6%;
    color: rgba(4,45,72,1);
}

.subfield {
    position: absolute;
    z-index: 6;
    float: left;
    font-size: 20px;
    margin-top: 122%;
    padding-left: 38%;
    padding-right: 6%;

}
<span class="bot-text" id="botText2">some 2-3 lines of text</span>
<form class="subfield" action="/signup"  method="post">
  <input type="text" id="emailInput" name="email" placeholder="Enter Your Email here">
  <input type="submit" id="inputSubmit" value="Subscribe">
</form>

Ответы [ 2 ]

0 голосов
/ 07 июля 2018

Не размещайте свои элементы абсолютно точно, иначе вы сможете добиться отклика только с помощью медиа-запросов. Позвольте вашему документу течь естественным путем, прерывая этот поток только тогда, когда это абсолютно необходимо.

Это позволяет браузеру определить размер / расположение для достижения наилучших результатов. Использование процентов в отличие от фиксированных значений позволит немного увеличить текучесть, но зависит от родителя.

Вы можете увидеть ниже, комментируя большую часть вашего позиционирования, браузер выдает желаемые результаты в качестве поведения по умолчанию. Поэтому я бы просто ответил, что во многих случаях меньше, конечно, может быть больше. 

#botText2 {
  /* z-index: 5; */
  text-align: center;
  font-size: 20px;
  /* margin-top: 107%; */
  /* padding-left: 6%; */
  /* padding-right: 6%; */
  color: rgba(4, 45, 72, 1);
}

.subfield {
  /* position: absolute; */
  /* z-index: 6; */
  /* float: left; */
  font-size: 20px;
  /* margin-top: 122%; */
  /* padding-left: 38%; */
  /* padding-right: 6%; */
}
<span class="bot-text" id="botText2">some 2-3 lines of text</span>
<form class="subfield" action="/signup" method="post">
  <input type="text" id="emailInput" name="email" placeholder="Enter Your Email here">
  <input type="submit" id="inputSubmit" value="Subscribe">
</form>
0 голосов
/ 05 июля 2018

Добавить поле или отступ к .subfield: 

.subfield {
    padding-bottom: 20% /*for example*/
}
...