Dawn Theme - Custom Text Field Adjust Height

[Roxolot]

How can I change the height of the custom text field? I would like it to be only as high as a line of text.

https://taskslider.de/products/taskslider-01

More important on the mobile version of the website.

<label for="message" class="form__label">Personalisierung (Groß- und Kleinschreibung beachten)</label>
      <div class="field">
        <textarea 
        id="message" 
        class="text-area field__input" 
        placeholder="Message" 
        name="properties[Text]"
        form="product-form-{{ section.id }}" 
        required 
        maxlength="10"
        ></textarea>
      </div>

[Dan-From-Ryviu]

Update your code to this 

<label for="message" class="form__label">Personalisierung (Groß- und Kleinschreibung beachten)</label>
      <div class="field">
        <textarea 
        id="message" 
        class="text-area field__input" 
        placeholder="Message" 
        name="properties[Text]"
        form="product-form-{{ section.id }}" 
        required 
        maxlength="10"
        ></textarea>
      </div>
<style>
#message {
    height: 3.5rem !important;
    padding: 4px !important
}
</style>

[Roxolot]

Unfortunately it does not work

This is my Css Code in Bse.css

product-form .field {
    margin-bottom: 3rem;
    height: 20%;
    width: 100%;
}

@media screen and (max-width: 749px) {
product-form .field {
    margin-bottom: 2rem;
    height: 20%;
    width: 100%;
}
}

[Dan-From-Ryviu]

Code updated 

<label for="message" class="form__label">Personalisierung (Groß- und Kleinschreibung beachten)</label>
      <div class="field">
        <textarea 
        id="message" 
        class="text-area field__input" 
        placeholder="Message" 
        name="properties[Text]"
        form="product-form-{{ section.id }}" 
        required 
        maxlength="10"
        ></textarea>
      </div>
<style>
#message {
    height: 3.5rem !important;
    padding: 4px !important;
    min-height: 20px !important;
}
</style>

[Roxolot]

it just changes the message. i want to change the height of the white container so that there is just one line

[Dan-From-Ryviu]

So please change the code 20% with some px example 20px

product-form .field {
    margin-bottom: 3rem;
    height: 20%;
    width: 100%;
}

@media screen and (max-width: 749px) {
product-form .field {
    margin-bottom: 2rem;
    height: 20px;
    width: 100%;
}
}

[Roxolot]

Unfortunately it didn't work, because then the text input is under the button and it overlaps