Double Row Appeared

  • For context, here is my live site, using Astra Theme:
    https://www.robinsondavid.com/property-buyer-register

    That is how I’d like the layout, with two columns for some text areas, all nice and uniform.

    However, now I’m building using Hello Theme on a staging site, and the rows are a lot shorter:
    https://staging.robinsondavid.com/property-buyer-register

    The rows in the double columns are only stretching about 50% of the way, but contact form 7 seems to think this is 100% of the way.

    When I exchange ‘label‘ for ‘input‘ like I have done on the first two text areas, you can see that the row then stretches 100% of the way. But, it’s also adding some weird little box above?!

    What is that little text area appearing in a new row?!

    Why is this happening?

    This is how I’ve built the form on this page:

    <div class="content-column one_half"><div style="padding:"0;">
<input> 
    [text* your-name placeholder "Full Name & Title (Required)"] </input></div></div>

<div class="content-column one_half last_column">
<input> 
    [email* your-email placeholder "Your Email (Required)"] </input></div><div class="clear_column"></div>

<div class="content-column one_half"><div style="padding:"0;">
<label> 
    [tel your-phone placeholder "Home/Work Phone"] </label></div></div>

<div class="content-column one_half last_column">
<label> 
    [tel* your-phone placeholder "Mobile Phone (Required)"] </label></div><div class="clear_column"></div>

<div class="content-column one_half"><div style="padding:"0;">
<label> 
    [text* your-address placeholder "Your Full Address (Required)"] </label></div></div>

<div class="content-column one_half last_column">
<label> 
    [text* price-range placeholder "Property Search Price Range (Required)"] </label></div><div class="clear_column"></div>

<div class="content-column one_full last_column">
<label> 
    [textarea* your-message placeholder "Property Specifications (Location, Bedrooms, Parking, Semi-Detached, Etc) The more detailed information you provide, the more accurate we can be."] </label></div><div class="clear_column"></div>

<div class="content-column one_full last_column">
<b>Preferred Districts</b>
[checkbox* checkbox-001 use_label_element "Badminton" "Berkeley" "Broadway" "Cheltenham" "Chipping Campden" "Cirencester" "Fairford" "Gloucester" "Newent" "Stonehouse" "Stroud" "Tetbury" "Tewkesbury" "Other"]</div><div class="clear_column"></div>

<div class="content-column one_full last_column">
<b>Trusted Referral</b>
[checkbox* checkbox-002 use_label_element "In Need of a Trusted Mortgage/Financial Advisor" "In Need of a Trusted Solicitor" "Already Have These Arranged"]</div><div class="clear_column"></div>

<div class="content-column one_full last_column">
<b>Current Position</b>
[checkbox* checkbox-003 use_label_element "First Time Buyer" "Nothing to Sell" "Sold Subject to Contract (SSTC) With Chain" "Sold Subject to Contract (SSTC) Without Chain" "Other"]</div><div class="clear_column"></div>

<div class="content-column one_full last_column">
<label> 
    [text* your-reason placeholder "Reason For Home Hunting (Required)"] </label></div><div class="clear_column"></div>

<div class="content-column one_full last_column">[submit "Register Interest"]</div><div class="clear_column"></div>
    • This topic was modified 3 years, 3 months ago by davidsavill. Reason: adding information

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    See Styling contact form

    Thread Starter davidsavill

    (@davidsavill)

    Hello,

    Thank you.

    In Elementor, when I go to custom CSS and use this from that styling page:

    input[type="text"],
input[type="email"],
textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

    If I put width to 200% then this solves the issue, but strangely only for the backend, on the frontend nothing has changed.

    Any idea why?

    Also, the one_full column box is only stretching halfway using this method.

    The easiest thing to do, I would imagine, is to simply change “label” to “input” as this solved the issue, but, it was adding that little extra box above. Why was it adding that little extra box?!

    • This reply was modified 3 years, 3 months ago by davidsavill.
    • This reply was modified 3 years, 3 months ago by davidsavill.
    Thread Starter davidsavill

    (@davidsavill)

    Ok, I changed it to this:

    .wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="text area"],
textarea
{
    width: 200%;
}

    And this does change things on the frontend. But, now you can see that by styling this way, it is going off to the right, and there is an issue with resizing now.

    https://staging.robinsondavid.com/property-buyer-register

    I think just figuring out why changing ‘label’ for ‘input’ is adding that little textbox above, and stopping that happening, because there are no issues with stretching or resizing this way.

    • This reply was modified 3 years, 3 months ago by davidsavill.
    • This reply was modified 3 years, 3 months ago by davidsavill.
    Thread Starter davidsavill

    (@davidsavill)

    Ok, so Ive changed it back to how it was, without that CSS above.

    As you can see, changing ‘label’ for ‘input’ (on the first two textboxes) makes it all fit nicely. But, what are those two little boxes appearing above?!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Double Row Appeared’ is closed to new replies.