-
digitalmulesformsAsked on May 1, 2024 at 12:35 PM
Hello! I would like to keep the appearance of my form the same on desktop, but on mobile it looks like it shifts my custom submit button to the next line, making the appearance display like the screenshot below when I embed it. Is there a way I can make it all on one line similar to the desktop version on the mobile version without touching the appearance on desktop?
Mobile Issue:
Desktop Appearance (Correct):
Thank you!
Page URL: https://form.jotform.com/241054431751145 -
Christopher JotForm SupportReplied on May 1, 2024 at 1:02 PM
Hi digitalmulesforms,
Thanks for reaching out to Jotform Support. Please inject the provided CSS code into your form.
/*Adjust form element width in mobile - 14446193*/
@media screen and (max-width: 480px) {
.form-col-1 {
width: calc(65% - 8px) !important;
}
.form-col-2 {
width: calc(35% - 8px) !important;
}
}
/*Code ends here*/
Here's how to do it:
1. In Form Builder, on the right side of the screen, click on the Paint Roller icon.
2. On the right panel, go to Styles.
3. Scroll down to Inject Custom CSS.
4. Paste the provided CSS code.
Result:
Give it a try and let us know how it goes.
-
digitalmulesformsReplied on May 1, 2024 at 1:30 PM
Hi! I injected the same code the same way and it looks like it did not work! See screenshots below.
.
-
Christopher JotForm SupportReplied on May 1, 2024 at 1:50 PM
Hi digitalmulesforms,
I have reviewed the custom CSS code in your form, and it looks like you have added an addition forward slash (/) which caused the provided CSS code not to work as shown in the screenshot.
Please remove it and the custom CSS code provided previously should work.
Give it a try and let us know how it goes.
-
digitalmulesformsReplied on May 1, 2024 at 3:57 PM
That worked! Thanks!