Support » Plugin: GiveWP - Donation Plugin and Fundraising Platform » Form fields appear cut off/too short

  • Resolved bonnie447

    (@bonnie447)


    Hi – we are setting up a new site/new GiveWP installation/new form. Almost there, but the form fields (you can see on the page above) appear weirdly cut off/way too short. You can’t see a single digit you type into the credit card field, for instance. Is this something to do with our theme interfering with GiveWP’s default CSS? I am going to try to fix in the Customizer, but checking my brain here as well if there’s some setting in GiveWP I need to change. Thanks!

    P.S. If anyone knows what CSS would fix the problem, do share!

    • This topic was modified 2 weeks, 6 days ago by bonnie447.

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Update: I’ve manually adjusted w/CSS fixes for the specifically odd fields (using “width: 400px;” and such), but I would still love to know if there’s a way to have give dynamically adjust width and height so that content is not cut off. The “comment” field on this form is a good example of one still weird – I would love for that one to stretch the full width of the form, but if I try using a hard “width: 700px;” for it, it looks awful on mobile. (For some reason the others I did like that seem fine on mobile.)

    Thanks in advance, CSS/Give gurus!

    Plugin Support Ben Meredith

    (@benmeredithgmailcom)

    Hi @bonnie447,

    This is a case of the theme’s styles not playing nicely with GiveWP’s styles. You are on the right track with using CSS to make the styles behave.

    We try our best to “stay in our lane” with GiveWP’s CSS, and let the theme do the bulk of the work of styling. Every now and then, depending on the theme, it means we got a little too “out of the way.”

    Here’s a CSS snippet that I think will resolve the rest of your issues:

    .give-fl-wrap, .give-fl-input {
        width:100% !important;
    }

    Thanks for reaching out, and for using GiveWP!

    Ah thank you! That’s much cleaner, haha. Thanks for the new knowledge!

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.