Form Field Width Ignored

  • Hello, I am trying to make the width of the form fields more narrow/responsive. I have tried several different CSS options, but they’ve all been ignored. Here is the current code I have in the stylesheet:

    .wpcf7 textarea, .wpcf7 select, .wpcf7 input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], input[type=number], input[type=tel], input[type=range], input[type=date], input[type=month], input[type=week], input[type=time], input[type=datetime], input[type=datetime-local], {
    width: 50% !important;
    }

    The input fields are still too width for mobile. What else can I try?

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

Viewing 1 replies (of 1 total)

  • hi

    Assuming that this is a question related to elementor and WordPress styling, unrelated to cf7.

    The problem is originated because you are using a column 33% of the width but its content is larger than the container, so you need to double check the with of the form elements.

    you need to style the first elements inside the <form> and not the last 

    <form>
  <p style="width: 100%"> <!-- need to style this-->
    <label>
      <input style="width: 100%"> <!-- but you are styling this and his container is 100% -->
      </input>
    </label>
  </p>
</form>

    this is an example

    form.wpcf7-form.init > * {
    max-width: 50%;
}
form.wpcf7-form > *:last-of-type {
    max-width: 100%;
}

    hope it helps!

Viewing 1 replies (of 1 total)
  • The topic ‘Form Field Width Ignored’ is closed to new replies.

Tags