Adding fields in the same row

Hello @life2

You can enter the class name column5 into the “Add CSS Layout Keywords” attributes in the fields values, and then enter the following style definition into the “Customize Form Design” attribute in the “Form Settings” tab (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png):

#fbuilder .column5{clear:none !important; float:left !important; width: 20% !important;}

Best regards.

Thanks. Another question, what if I wanted to change the width for one of the fields (e.g. increase the width for the first field)?

Hello @life2

You can assign different class names to the fields and define these styles through the “Customize Form Design” attribute in the “Form Settings” tab.

Best regards.

Okay, I see, but I have a problem. The fields don’t look good on smaller screens with the 5 columns. How do I change the number of columns based on the screen size?

Hello @life2

The solution would be to use the @media instruction in CSS (https://www.w3schools.com/cssref/css3_pr_mediaquery.asp), like:

@media screen and (min-width:640px)
{
#fbuilder .column5{clear:none !important; float:left !important; width: 20% !important;}
}

Best regards.