-
epkpanamaFecha de consulta 26 de enero de 2024, 10:14
buen día
solicito su apoyo para poder ajustar el form en el celular y que aparezca bien, adjunto captura. Y necesito que se vea lo más parecido a esto
gracias!
-
Mike_G Jotform SupportFecha de respuesta 26 de enero de 2024, 17:35
Hi epkpanama,
Thanks for your patience and understanding. I understand you want to make multiple inline fields on your form responsive on different screen sizes, especially on mobile. Let me show you how to do it:
1. Open your form in Form Builder, and click on the Paint Roller icon on the right side of the page to open Form Designer.
2. In the Form Designer menu, click on the Styles tab, scroll down, and remove all the custom CSS codes in the Inject Custom CSS box.
3. Copy the CSS codes below:
/*make multiple inline fields mobile responsive - #11193901 */
label#label_58 {
height: 19px;
}
#input_58 {
text-align: center !important;;
}
#id_58 {
min-width: 40px !important;
}
li#id_41 {
width: calc(50% - (50% - 270px));
}
@media screen and (max-width:592px) {
li#id_41 {
width: calc(55% - 8px) !important;
}
li#id_52 {
width: calc(30% - 8px) !important;
min-width: calc(30% - 8px) !important;
}
}
@media screen and (max-width:480px) {
ul.form-section {
padding: 0px !important;
}
}
/*Ends here*/
4. Paste the custom CSS codes into the Inject Custom CSS box and close the Form Designer menu to save the changes.
5. Next, click on the Gear icon on the right of these form fields to open their Properties window.
- Correo / Email
- Especifique / Specify
6. Under the Advanced tab, toggle the Move to a new line property of the fields to the On position.
And that's it. Check out the screenshots below to see the result:
Desktop:
Mobile:
I've cloned your form and made the necessary adjustments so you can test it before applying the changes to yours. You can find my cloned form here. Feel free to clone my form to your account so you can inspect it. Click here to see how to clone the form. Also, check out our guide explaining how to inject custom CSS codes into your form.
Give it a try, and reach out again if you have any other questions.
-
epkpanamaFecha de respuesta 27 de enero de 2024, 13:05
ty! I resolve it