Title: Layout issues…
Last modified: August 31, 2016

---

# Layout issues…

 *  Resolved [Andi5](https://wordpress.org/support/users/andi5/)
 * (@andi5)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/layout-issues-11/)
 * I have installed the plugin and built a very simple form that calculates potential
   profit based on a nonprofit’s membership numbers.
 * The form is at [http://www.causefunders.com/how-it-works/](http://www.causefunders.com/how-it-works/)
   
   Password is cftravel3 (we are just using this to minimize viewing before we launch
   in a couple days)
 * As you will see there is a large amount of unused space to the right of the form
   fields. I would ideally like the labels and forms centered in the middle, with
   either the label to the left of the input field or stacked above. However, I 
   want an equal amount of padding around the entire form… perhaps around 20px.
 * I am attaching the CSS code I am using for its current state below. Please advise.
 *     ```
       /*CALCULATOR EDITS*/
   
       .cp_cff_professional {
       background: transparent linear-gradient(to bottom, #0a84c1 0%, #00306e 100%) repeat scroll 0% 0% !important;
       }
   
       .cp_cff_professional #fbuilder input[type="text"] {
       font-size:24px !important;
       font-weight:bold !important;
       color:#8e8e8e !important;
       padding-top: 7px !important;
       padding-bottom: 7px !important;
       border-radius: 10px !important;
       background: transparent linear-gradient(to bottom, rgb(227, 227, 227) 0%, rgb(247, 247, 247) 8%, rgb(255, 255, 255) 100%) repeat scroll 0% 0% !important;
       }
   
       .cp_cff_professional #fbuilder label {
           width:40%  !important;
       }
       ```
   
 * [https://wordpress.org/plugins/calculated-fields-form/](https://wordpress.org/plugins/calculated-fields-form/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/layout-issues-11/#post-6932508)
 * Hi,
 * Please, select the fields in the form, and in their “Field Size” attribute, select
   the “Large” choice.
 * Best regards.
 *  Thread Starter [Andi5](https://wordpress.org/support/users/andi5/)
 * (@andi5)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/layout-issues-11/#post-6932555)
 * I did so and it solved the issue of the empty space to the right. However, I 
   would like for the field input space to be shorter (right now it takes up 2/3
   of the frame) and the label space to be longer (The label I want to use is longer
   than any potential inputs). I would also love it if the entire calculator could
   be slightly narrower in the end.
 * Is there a way to edit the CSS to where this is possible?
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/layout-issues-11/#post-6932569)
 * Hi,
 * Yes of course, you simply should vary the of CSS rules for “width” of the styles
   definitions:
 * #fbuilder .left_aligned .fields label{float:left;width:31%;}
    #fbuilder .left_aligned.
   fields .dfield{float:left;width:65%;}
 * In the “/wp-content/plugins/calculated-fields-form/css/stylepublic.css” file.
 * Tip: Remember to clear the browser’s cache after edit the online files.
 * Best regards.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Layout issues…’ is closed to new replies.

 * ![](https://ps.w.org/calculated-fields-form/assets/icon-256x256.jpg?rev=1734377)
 * [Calculated Fields Form](https://wordpress.org/plugins/calculated-fields-form/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/calculated-fields-form/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/calculated-fields-form/)
 * [Active Topics](https://wordpress.org/support/plugin/calculated-fields-form/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/calculated-fields-form/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/calculated-fields-form/reviews/)

## Tags

 * [field](https://wordpress.org/support/topic-tag/field/)
 * [input](https://wordpress.org/support/topic-tag/input/)
 * [label](https://wordpress.org/support/topic-tag/label/)
 * [layout](https://wordpress.org/support/topic-tag/layout/)
 * [spacing](https://wordpress.org/support/topic-tag/spacing/)
 * [width](https://wordpress.org/support/topic-tag/width/)

 * 3 replies
 * 2 participants
 * Last reply from: [codepeople](https://wordpress.org/support/users/codepeople/)
 * Last activity: [10 years, 5 months ago](https://wordpress.org/support/topic/layout-issues-11/#post-6932569)
 * Status: resolved