Form fields appear cut off/too short

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!

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!