CSS - Mobile Version

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;}

 }

Was this article helpful?
2 out of 5 found this helpful

Comments

0 comments

Please sign in to leave a comment.