Show side by side

Hello @mira404

The plugin expands the field width on mobiles to 100% to make it easier for users to enter field values. The solution would be to use the second alternative to distribute the fields into columns. Please, follow the steps below:

1. Select the one-column option for the columns attribute in the DIV field.

2. Enter the class name col-xs-6 through the “Add CSS Layout Keywords” attribute in the fieldname26 and fieldname27 fields.

Please, watch the following video:
https://youtu.be/G8Of-V49pAQ

And read the blog post:
https://cff.dwbooster.com/blog/2019/01/06/columns

Best regards.

Hello @mira404

Note that you have two DIV fields with their corresponding summary fields, and you have applied the modifications to only one of them.

You should apply the changes to both.

Best regards.

Hello @mira404

You can assign multiple class names to the fields to modify their widths based on the screen sizes.

Please, enter the class names col-xs-8 col-md-6 in the “Add CSS Layout Keywords” attribute of fieldname26 and the class names col-xs-4 col-md-6 in the fieldname27.

A row is composed of twelve columns. I’m telling the plugin that both fields (fieldname26 and fieldname27) will take six columns on desktops, but on small screens, the fieldname26 will take eight columns and fieldname27 only four.

Best regards.

Hello @mira404

Yes, that’s possible. You can assign an additional class name to the fieldname27 field, for example, my-class. The information in the “Add CSS Layout Keywords” attribute in the fieldname27 would be col-xs-4 col-md-6 my-class.

And then, you can define the new class through the “Customize Form Design” attribute in the “Form Settings” tab (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png):

#fbuilder .my-class .cff-summary-value::before{content: "—" !important; display:inline-block !important; padding-right:30px !important;}

Please, if you need a custom coding service to customize your form design, you should contact us through the plugin website:
https://cff.dwbooster.com/customization

Best regards.

Hello @mira404

Yes, you must assign the class name to the summary fields on the right side.

Best regards.

Hello @mira404

You might need to reduce the font-size rule assigned to the summary labels and values and reduce the padding-right in the style definition I sent you previously.

Best regards.

Hello @mira404

In this case, you can reduce the number of columns assigned to the left column, and increase the padding-right in the styles defined in the previous entry.

Best regards.

Hello @mira404

You have two summary fields distributed in columns, left and right, that use class names like col-xs-8 col-md-6

If you want to display the hyphen symbol more separated from the values in the summary field at the right, you can reduce the number of columns assigned to the left summary field:

col-xs-7 col-md-5

Increase the columns assigned to the summary field at the right:

col-xs-5 col-md-7 my-class

And then, increase the padding-right:

#fbuilder .my-class .cff-summary-value::before{content: "—" !important; display:inline-block !important; padding-right:100px !important;}

You probably need to modify the values.

Best regards.