How do I make my custom submit button on the same line as the email field on mobile?

  • digitalmulesforms
    Asked 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:

    How do I make my custom submit button on the same line as the email field on mobile? Image 1 Screenshot 30

    Desktop Appearance (Correct):

    How do I make my custom submit button on the same line as the email field on mobile? Image 2 Screenshot 41

    Thank you!

  • Christopher JotForm Support
    Replied 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.

    How do I make my custom submit button on the same line as the email field on mobile? Image 1 Screenshot 30

    Result:

    How do I make my custom submit button on the same line as the email field on mobile? Image 2 Screenshot 41

    Give it a try and let us know how it goes.

  • digitalmulesforms
    Replied 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.


    How do I make my custom submit button on the same line as the email field on mobile? Image 1 Screenshot 30. How do I make my custom submit button on the same line as the email field on mobile? Image 2 Screenshot 41

  • Christopher JotForm Support
    Replied 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.

    How do I make my custom submit button on the same line as the email field on mobile? Image 1 Screenshot 20

    Please remove it and the custom CSS code provided previously should work.

    Give it a try and let us know how it goes.

  • digitalmulesforms
    Replied on May 1, 2024 at 3:57 PM

    That worked! Thanks!

 
Your Answer