Title: Reduce space between two fields using css
Last modified: January 30, 2023

---

# Reduce space between two fields using css

 *  Resolved [medhaa](https://wordpress.org/support/users/medhaa/)
 * (@medhaa)
 * [3 years, 4 months ago](https://wordpress.org/support/topic/reduce-space-between-two-fields-using-css/)
 * I need the input area of two calculated fields side by side..the second field
   will not have the label.
 * In the form link mentioned above, how can I reduce the space between the two 
   input fields inside the Ingredients fieldset? and the field size is also varying
   when I changed it to 2 columns. How can I keep them of the same size?
    -  This topic was modified 3 years, 4 months ago by [medhaa](https://wordpress.org/support/users/medhaa/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Freduce-space-between-two-fields-using-css%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [3 years, 4 months ago](https://wordpress.org/support/topic/reduce-space-between-two-fields-using-css/#post-16423194)
 * Hello [@medhaa](https://wordpress.org/support/users/medhaa/)
 * Configure the fields’ sizes as large (you can select it via dropbox in the fields’
   settings). If you want to hide the fields labels, but preserves their spaces,
   you can enter ` ` as their labels.
 * Best regards.
 *  Thread Starter [medhaa](https://wordpress.org/support/users/medhaa/)
 * (@medhaa)
 * [3 years, 4 months ago](https://wordpress.org/support/topic/reduce-space-between-two-fields-using-css/#post-16423210)
 * I need the field sizes to be small. And I don’t want to preserve the space for
   labels….rather….I just want the second field to move beside the first one.
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [3 years, 4 months ago](https://wordpress.org/support/topic/reduce-space-between-two-fields-using-css/#post-16423386)
 * Hello [@medhaa](https://wordpress.org/support/users/medhaa/)
 * Please, configure the fields as large, and enter the style definition belo through
   the “Customize Form Design” attribute in the “Form Settings” tab:
 *     ```wp-block-code
       @media (min-width:710px){
       #fbuilder .cff-container-field .cff-calculated-field{max-width:300px}	
       }
       ```
   
 * Best regards.
 *  Thread Starter [medhaa](https://wordpress.org/support/users/medhaa/)
 * (@medhaa)
 * [3 years, 4 months ago](https://wordpress.org/support/topic/reduce-space-between-two-fields-using-css/#post-16423696)
 * Thanks!
 * I used the below code as I wanted the width to be adjusted only for the imput
 * `@media (min-width:710px) { #fbuilder .cff-container-field .cff-calculated-field
   input {max-width:150px} }`
 * It worked well for setting the equal width for the input area.
 * But there still is a lot of space between the two input areas. How do I reduce
   that?
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [3 years, 4 months ago](https://wordpress.org/support/topic/reduce-space-between-two-fields-using-css/#post-16423705)
 * Hello [@medhaa](https://wordpress.org/support/users/medhaa/)
 * Please, follow my recommendations in the previous entry. Instead of modifying
   the width of the input tags with CSS, configure the fields’ sizes as “large” 
   from their settings, and define the width of the tag field’s container with CSS:
 *     ```wp-block-code
       @media (min-width:710px){
       #fbuilder .cff-container-field .cff-calculated-field{max-width:300px}	
       }
       ```
   
 * Best regards.
 *  Thread Starter [medhaa](https://wordpress.org/support/users/medhaa/)
 * (@medhaa)
 * [3 years, 4 months ago](https://wordpress.org/support/topic/reduce-space-between-two-fields-using-css/#post-16423736)
 * Okay! So, this is fine but the length of both the input areas is still different.
   Also, if the label I provide is longer, it will not fit in…Can we increase the
   space between the first label and input area?
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [3 years, 4 months ago](https://wordpress.org/support/topic/reduce-space-between-two-fields-using-css/#post-16424599)
 * Hello [@medhaa](https://wordpress.org/support/users/medhaa/)
 * If you leave the field’s label empty, the plugin will expand the input tag to
   occupy that space. For that reason, I recommended entering ` ` instead.
 * Best regards.

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

The topic ‘Reduce space between two fields using css’ 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/)

 * 7 replies
 * 2 participants
 * Last reply from: [codepeople](https://wordpress.org/support/users/codepeople/)
 * Last activity: [3 years, 4 months ago](https://wordpress.org/support/topic/reduce-space-between-two-fields-using-css/#post-16424599)
 * Status: resolved