CSS - Mobile Version

Jessica

January 22, 2019 05:58

Updated

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

...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