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.
Thread Starter
blue
(@life2)
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.
Thread Starter
blue
(@life2)
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.
