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. 

  1. Login to WordPress
  2. Go to your Advanced CSS settings within ClassyPress Pro
    1. WordPress Dashboard => ClassyPress Pro => General Settings => Advanced
  3. You will see a screen that looks similar to the following:
  4. 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

Still need help? Contact Us Contact Us