Адаптив для текстового поля?

Question

[hypero]

Всем привет.

Есть модальное окно. На разрешении 480px и меньше текстовое поле ломается, нужно чтобы оно адаптировалось.
Как это можно сделать?
Набросал код: https://codepen.io/anon/pen/zgKYLL

Answer 1

[Влад Громов]

Используйте медиа запрос, и при разрешении 480рх и менее уменьшите размер модального окна.

@media (min-width: 320px) and (max-width: 480px) {
//здесь стили
}

Comments

[hypero]

Ну тогда текста вообще не будет видно, модальное окно и так уменьшено, размер шрифта 12px.

[Влад Громов]

hypero, добавил в CSS:

@media (min-width: 320px) and (max-width: 480px) {
  .box-modal{
    min-width: 420px;
    padding: 1%;
  }
}

Скрин сделан при ширине в 480px:

[hypero]

Влад Громов, посмотрите на разрешении например 320px

[Влад Громов]

hypero, еще советую заменить min-width: 800px; на width: 800px;

@media (max-width: 480px) {
  .box-modal{
    width: 95vw;
    padding: 1%;
  }
  .modal-referal__value{
    font-size: 3vw;
  }
}