How do I make the mobile version look like the desktop version?

  • Cherrycrest
    Asked on May 29, 2020 at 1:54 PM

    We are using Jotform for an Ispy adventure where guests fill in letters of the animals they are able to spy. On my phone the spaces for the letters do not line up in the same line like the desktop version. Is there a way to correct this?

    Jotform Thread 2355934 Screenshot
    Page URL: https://form.jotform.com/Cherrycrest/cherry-crest-ispy-adventure
  • John Support Team Lead
    Replied on May 29, 2020 at 4:56 PM

    Hello @Cherrycrest - I can see that you have a placed a few text boxes in one line:

    How do I make the mobile version look like the desktop version? Image 10

    This will require a lot of custom CSS codes to make these fields appear on one line when the form is accessed on mobile.

    However, I'm afraid it won't work for these questions below considering the screen size of a mobile device. These may not fit horizontally:

    15907857362355934 2 Screenshot 21

    But let me check for possible custom CSS codes you can use and get back to you here.

  • John Support Team Lead
    Replied on May 31, 2020 at 4:20 AM

    Thank you for waiting!

    After a few tests, I came up with a workaround. Could you please try replacing the existing custom CSS codes in your form with the below?

    @media screen and (max-device-width: 40em){

    .form-line.form-line-column {

    width: 62.1563px!important;

    }

    .form-line-column .form-sub-label {

      width: 25px;

      text-align: center;

    }

    }

    Please try that and let us know how it goes.