These comments are based on using the fd_basic_default.css file and the form is identified by the following comments in the code
<!--
WebAssist CSS Form Builder - Form v1
CC: eCommerce
CP: Checkout Wizard
TC: Basic
TP: Default
-->
For mobile checkout you cannot have large set pixel widths so the following rules were changed:
/* form general definition */
form.Basic_Default {
/*width:760px;*/
width: 100%;
}
form.Basic_Default div.fullColumnGroup {
/*width:728px;*/
width: 100%;
padding-bottom:15px;
padding-top:7px;
display:inline;
float:left;
}
form.Basic_Default div.columnGroup {
/*width:760px;*/
width: 100%;
padding-bottom:15px;
padding-top:7px;
display:inline;
float:left;
}
This worked for me because the form is contained within a div that has it's width set as a percentage of the overall container so my aim is to have the form occupy 100% of that width.
On a mobile device forms should be displayed with the label above the form element not side by side as you do on the desktop so I wrote the following media query to do this:
/* Smartphones Portrait */
@media only screen and (min-width: 0px) and (max-width: 480px) {
form.Basic_Default div.formGroup, form.Basic_Default span.buttonFieldGroup {
width: 100%!important;
}
form.Basic_Default input.formTextfield_Large, form.Basic_Default input.formTextfield_XLarge {
width: 90%!important;
padding:5px!important;
border-radius:5px!important;
}
form.Basic_Default label.sublabel {
width: auto!important;
float: none!important;
text-align: left!important;
}
}
This will give you the basics of a responsive form that you can build on.
As an aside there a couple of rules in the stylesheet with an extra closing curly bracket:
form.Basic_Default input.formButton {}}
form.Basic_Default input.formButton:hover {}}
These should be fixed.
