Have an issue with multiline text box width sizing

I see elsewhere that this reference below needs to be edited in the response/question/textarea.php file

<textarea name="free-text-<?php echo $item->id?>" cols="25" rows="3" class="input-xxlarge<?php echo $required;?>"

and edited to

<textarea name="free-text-<?php echo $item->id?>" cols="25" rows="3" class="form-control<?php echo $required;?>"

In searching all layouts at this reference components/com_communitysurveys/layouts that the second reference is in all
response/question/textarea.php files.

Bad enough on a 27" desktop but on a mobile/tablet it does not scale at all and basically defeats the purpose

I fuigured I'd try css changes but this isn't happening as the applicable style already says 100% width, which I figure is overridden by the  cols="25" and this CSS is coming via default from the template framework.

input, textarea {
    font-family: inherit;
    font-size: 1em;
    line-height: 2em;
    padding: 6px 12px;
    background: #c1cdc1;
    color: #143d20;
    border: 1px solid #c1cdc1;
    max-width: 100%;
    margin-bottom: 15px;
    min-height: 42px;
    border-radius: 2px !important;
}

Any other way of using CSS to format that column width so it becomes responsive?

Thanks