GiveWP form fields different height than others

  • Resolved douglasped

    (@douglasped)


    3 years, 11 months ago

    How do I get the form fields for billing details to be same height as the others? I tried finding the code in order to change this by CSS by can’t find the right identifiers. The issue is with the country field that is pre-populated (“United States” is filled in and overlaps with the floating label “Country” due to the smaller height) and the field for “State” is smaller height than the Zip Code field beside it, making it look off aesthetically.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter douglasped

    (@douglasped)

    3 years, 10 months ago

    This doesn’t seem like something I should try to fix through custom CSS, but if this is the only way, please let me know how I can identify the specific modal form field for “country” and “state” since both of these are the ones that come up a different height than the other fields such as “address, city” etc. The form looks sloppy as such, especially the “country” field since this smaller height causes the prefilled “united states” wording to overlap with the field title “country”. The “state” field is obviously shorter since it is beside the regular height “zip” field.

    Plugin Support Rick Alday

    (@mrdaro)

    3 years, 10 months ago

    Hi @douglasped

    Do you have a link where we can see the form in action?
    This way we can provide you with the exact CSS code you need to fix it as there’s probably a CSS conflict with another plugin or the theme.

    Thread Starter douglasped

    (@douglasped)

    3 years, 10 months ago

    It’s a pretty basic website built with Elementor on top of OceanWP theme so not sure what would be in conflict. Site is kaiinternational[.]org and the form is on the homepage. Click “continue” to see rest of fields. Would love to see a fix.

    Plugin Support Rick Alday

    (@mrdaro)

    3 years, 10 months ago

    Hi @douglasped

    Try this CSS code:

    [id*=give-form].give-fl-form.give-fl-style-give select.give-fl-select {
    padding: 15px 12px 0 !important;
    min-height: 50px;
}
    Thread Starter douglasped

    (@douglasped)

    3 years, 10 months ago

    This works – Excellent, thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘GiveWP form fields different height than others’ is closed to new replies.