How to add custom CSS to fix common formatting issues
Sometimes your WordPress theme conflicts with the styling of ClassyPress. To resolve this, most of the time you simply need to direct the text field to go full-width (100%) instead, while adjusting the line-height of the text field and the font size.
Seen below, is a common issue we see with some WordPress themes.
To resolve this, it's rather quite simple.
- Login to WordPress
- Go to your Advanced CSS settings within ClassyPress Pro
- WordPress Dashboard => ClassyPress Pro => General Settings => Advanced
- You will see a screen that looks similar to the following:
- From here, copy and paste the following CSS into the Custom CSS text field:
/******* START of code to copy *******/ .classy-donation-form.short input[type="text"] { line-height:40px; font-size:20px; width:100%; } /******** END of code to copy *******/
If that doesn't work, you'll want to add !important after the CSS and before the semi colon. So it would look something like this:
width:100%!important;
5. Then click Save.
When done, your form will look like the following image:
RESOURCES
- You can download the .txt file directly right here: Custom CSS for ClassyPress
- If the above code doesn't work, then you can get the version with the !important tags right here: Custom CSS for ClassyPress - Important Override