Our forms are mobile friendly when using the link on the Publish page of the form or when embedded by using the Javascript embed code. Below is a little bit of CSS that you can copy and paste to your theme to make changes to the mobile versions of the forms.
...forces a width only above a certain size
@media screen and (min-width:800px) {
.fsForm.fsSingleColumn, .fsForm.fsMultiColumn {width:800px;}
}
...makes rows auto width for anything under this pixel size
@media only screen and (max-width:900px) {
.fsForm .fsFieldRow .fsRowBody {width:auto;}
}
...compresses fsPage over this pixel size - size up form fields to stretch across
@media only screen and (min-width:500px) {
.fsBody .fsPage {max-width: 500px; margin: 0 auto;}
}
...makes 4 column rows respond to mobile while embedded
@media screen and (min-width:680px) {
.fsBody.fsEmbed .fs4Col {min-width: 680px;}
}
...prevents text type fields from going wider under 640px
@media (max-width: 640px) {
.fsBody .fsFieldRow input[type="text"] {width: 100%; font-size: inherit; }
}
...lets email, tel, textarea field input types expand to 100% under 640px
@media (max-width: 640px) {
.fsBody .fsFieldRow input[type="email"], .fsBody .fsFieldRow input[type="tel"], .fsBody .fsForm textarea { width: 100%; }
}
...controls mobile button: replaces next/prev arrow buttons, sizes down to fit next/prev button. Other attributes included for preventing problems on embed. When using, you must set bg color to override next/prev button backgrounds
@media only screen and (max-width:699px) {
span.fsFull {display:block;}
span.fsSlim {display:none;}
.fsPagination .fsNextButton, .fsPagination .fsPreviousButton, .fsSubmitButton {
background: #ff1918 !important;text-indent:0; width:auto; height:auto; font-size:12px !important; padding: 15px 35px !important;}
}
Note: Factors like browsers, screen sizes, operating systems, and version updates will affect how forms appear across devices. It is recommended to always test forms on any device you need to support.