Как сделать адаптивным окно ввода сообщения?

Question

[jenya7771]

как сделать адаптивным окно ввода сообщения?

<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;

}

С использованием дива #message в обычных окнах всё хорошо, но при использовании в телефоне оно смещается. В телефоне всё хорошо с дивом #message1

Answer 1

[Максим Тимофеев]

А почему width в %, а margin в px, попробуйте так:

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

Мало того, Вы же bootstrap используете, там модальные окна из коробки и размер настраивается одним классом
getbootstrap.com/javascript/#modals-sizes