How do I set a default size for a textarea, yet still allow it to adjust based on the user's device?

Question

I am trying to make a textarea with 5 rows and a width defaulted to the width of the container below it, but also allow it to become more narrow if a user is on a small mobile device (e.g. a smart phone). I've been researching and I see that there is debate on whether to use CSS or HTML to alter the size of a textarea. I'm fairly new to web development (started last week), so if you know how to fix my problem could you tell me why you chose the method you did?

<form class="form-inline">

    <div class="form-group">

        <textarea class="form-control" rows="5"></textarea>

    </div>
</form>


<form class="form-inline">

  <div class="form-group">

    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>

    <div class="input-group">

      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">

    </div>

  </div>

  <button type="submit" class="btn btn-primary">Send!</button>

</form>

Answer 1

using form-inline makes the form-group display inline-block.. if you want the form-group to stretch the entire width you can use form-horzontal

or you can just set the display style of the form-group to block

<form class="form-inline">
    <div class="form-group" style="display:block">
        <textarea class="form-control" rows="5"></textarea>
    </div>
</form>

make sure you site.css doesn't have a max-width value for textareas. this is in the default style sheet I believe

input,
select,
textarea {
    max-width: 280px;
}