How to make the input window responsive?

Question

css

how to make the input box responsive?

<div class="col-md-6">
            <div class="ob-sw">
              <h2>Обратная связь</h2>
              <form class="form-horizontal" method="post" action="" name="swz">
                <div class="form-group">
                  <label for="inputName" class="col-sm-2 control-label">Имя</label>
                  <div class="col-sm-10">
                    <input name="name" type="text" class="form-control" value="<?=$_SESSION["name"]?>" id="inputName" placeholder="Имя" required>
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                  <div class="col-sm-10">
                    <input name="email" type="email" class="form-control" value="<?=$_SESSION["email"]?>" id="inputEmail3" placeholder="Email" required>
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputPhone" class="col-sm-2 control-label">Телефон</label>
                  <div class="col-sm-10">
                    <input name="phone" type="text" class="form-control" value="<?=$_SESSION["phone"]?>" id="inputPhone" placeholder="Телефон" required>
                  </div>
                </div>
            <div class="form-group has-feedback">
              <label for="inputMessage" class="control-label col-sm-2">Cообщение</label>
              <textarea name="message" class="form-control" type="text" id="message" rows="5" placeholder="Введите сообщение" minlength="10" maxlength="1000" required="required"></textarea>
            </div>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <button name="go" type="submit" class="btn btn-default">Отправить</button>
                  </div>
                </div>
              </form>
            </div>
          </div>

#message{
  width: 79%;
  float: right;
  margin-right: 12px;
  margin-left: 0px;

}
#message1{
  float: right;
  margin-right: 12px;
  margin-left: 35px;

}

Using the #message div in regular windows is fine, but when used on a phone, it shifts. Everything is fine on the phone with the #message1 div

Answer 1

Why is width in % and margin in px, try this:

#message{
  width: 78%;
  margin: 0 11%;
}

Moreover, you use bootstrap, there are modal windows out of the box and the size is configured with one class
getbootstrap.com/javascript/#modals-sizes