Bring 2 fields same row closer together

Hello @victoriei101

Thank you very much for using our plugin. The issue is caused by your custom styles, like:

#fbuilder .saptezecilasuta {
    width: 70%;
    clear: none !important;
    float: left;
}

Instead of using the predefined plugin styles to distribute the fields into columns.

Please follow the steps below:

1. Select the “large” option for the “Field Size” attribute in the “fieldname2” field’s settings.
2. Remove the “saptezecilasuta” class name from the fieldname2 settings and “treizecilasuta” from the fieldname16 settings, and use the col-sm-4 and col-sm-8 respectively.

I did the modifications in the browser’s console to check what would be the form appearance with the modifications:

Best regards.

Hello @victoriei101

In this case, instead of using the class names col-sm-# please use col-xs-# like col-xs-4 and col-xs-8

Learn more about the class names to format the fields into columns by reading the following blog post:

https://cff.dwbooster.com/blog/2019/01/06/columns

Best regards.

Hello @victoriei101

If you need to customize a specific field’s appearance, you must assign a custom class name to it and define the class through the “Customize Form Design” attribute in the “Form Settings” tab (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png)

Note you can assign multiple class names to a field through its “Add CSS Layout Keywords” attribute separating them by space characters.

For example, if you assign the custom-class class name to the field, you can enter a style definition similar to the following one through the “Customize Form Design” attribute:

.custom-class label{
font-weight: bold !important;
color: red !important;
}

Best regards.