Dawn Theme - Custom Text Field Adjust Height

Roxolot
Explorer
57 2 12

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.

 

Roxolot_0-1699703681945.png

 

 

 

 

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

 

 

 

 

 

 

Replies 6 (6)
Dan-From-Ryviu
Shopify Partner
5572 1022 1054

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>

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

Roxolot
Explorer
57 2 12

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
Shopify Partner
5572 1022 1054

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>

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

Roxolot
Explorer
57 2 12

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
Shopify Partner
5572 1022 1054

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

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

Roxolot
Explorer
57 2 12

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