CSS font-size and/or width of form give amount aka give amount top

Hi @doste,

Happy to help. You can use this CSS code:

form[id*=give-form] .give-donation-amount input.give-amount-top {
    width: 220px !important;
}

Adjust the value as needed. In order to implement CSS code into the multi-step form you need to use this PHP snippet: https://github.com/impress-org/givewp-snippet-library/blob/master/form-customizations/css-customizations/multi-step-inline-styles.php

If you need assistance implementing custom PHP code on your website we have this guide:

https://givewp.com/documentation/resources/adding-custom-functions-to-your-wordpress-website/

Please note that this code snippet is provided as an example of how you can extend GiveWP with code. It’s up to you to implement and customize to your liking. We cannot provide support for custom code on your website, only the code that we create and distribute.

Rick,

Worked perfectly. Thank you very much!

Hi Rick and everyone,

I apologize for reopening this, but I’ve been trying to fit 10,000,000 in the input.give-amount-top like you said and, although giving width greater than 240 works, it doesn’t properly fit an iPhone display.

What would be the css to reduce the font size so an 8-digit entry displays properly across all devices? Hoping for a font size trick.

Thanks!

Hey @doste,

You could use something like this:

input.give-amount-top {font-size: 10px}

Please note that this code snippet is provided as an example of how you can extend GiveWP with code. It’s up to you to implement and customize to your liking. We cannot provide support for custom code on your website, only the code that we create and distribute.

Thanks for using GiveWP! Have a great day.

Matheus,

Perfect! Thank you!!

https://github.com/impress-org/givewp-snippet-library/blob/master/form-customizations/css-customizations/multi-step-inline-styles.php

Not found.