Responsive textarea width over whole form width with 2 column layout

  • Resolved digitalgypsych

    (@digitalgypsych)


    3 years, 10 months ago

    Hi

    I am trying to implement a 3 row, 2 column contact form (2 rows with 2 text input fields each and 1 row with a textarea field). I use the Column Shortcodes plugin to make the table via div containers.

    I cannot manage to have the textarea filling the whole third row with 1 column. I have tried it with CSS width 100% (Only 50% of the row is filled then) as well as with setting the row count in the textarea code (columnsxrows) which makes the textarea the correct width but is not responsive anymore (Width stays when resizing window as well as differences of widths in different browsers). The 100% setting vis CSS is actually set on the page.

    Any help is appreciated, thanks in advance.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • My approch:

    form

    <div class="two-columns">
<label> [text* street placeholder "Street*"] </label>
<label class="half"> [text* zip placeholder "Zip code*"] </label><label class="half"> [text* town placeholder "Town*"] </label>
</div>

    css

    .wpcf7-form .two-columns {
    column-count: 2;
    column-gap: 40px;
}

input[type=email], input[type=tel], input[type=text], input[type=url] {
    width: 100%;
    max-width: 100%;
}

label.half {
    width: 49%;
    display: inline-block;
    margin-right: 2%;
}
    Thread Starter digitalgypsych

    (@digitalgypsych)

    Hi

    Thanks for your quick reply. I have implemented your approach. The Text fields (Phone, Name, eMail, Text) are working fine but still the textarea only covers half of the form instead of the whole width…

    Best regards

    sorry missing some explanations…

    you need to use the two-col class as wrapper for the whole form, and for each label you can choose if use the full with or half (.half)

    in your case:

    <form>
<div class="two-columns">
  <label class="half"> Vollst?ndiger Name *<br>.....
  <label class="half"> E-Mailadresse *<br>......
  <label ..... 
  <label ....
</div>
<p><label style="
    width: 100%;
"> Nachricht *....
</p></form>

    View post on imgur.com

    Thread Starter digitalgypsych

    (@digitalgypsych)

    Hi Erik

    Now it seems to be working fine. Thanks a lot!

    Best regards

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Responsive textarea width over whole form width with 2 column layout’ is closed to new replies.