Form Mobile View Has Different Layout and Font Styles

Hello. My form, "HatlerGurius Model Application," does not retain its design while viewed on mobile devices although the Preview Form version shows otherwise. Can you advise? Please let me know if any other information is needed.

Cameron

Hi Cameron,

Thanks for reaching out to Jotform Support. I cloned your form and tested it to see if I could replicate the issue, but I couldn't find the mismatch between the preview mode and the mobile view you've mentioned. Take a look at my screenshots below: 

Preview mode: 

What appears in my mobile device:

Does anything different appear on your preview mode?

After we hear back from you, we’ll have a better idea of what’s going on and how to help.

Hi, Eduardo. I copied the form as well, but still see the version that appears in the screenshot I provided earlier. I've cleared my cache and tried using a private browser. Is there any reason why a chosen font would show up on desktop but not mobile?

Cameron

Hi Cameron,

Some mobile browsers just don’t render certain fonts, or they fall back to a default if the font fails to load fast enough. When I tested your form on mobile, I have this result:

Could you try injecting the custom CSS codes to check if the font styling remains consistent across different mobile devices? Let me show you how:

1. First, copy this code:

@media only screen and (max-width: 600px) {

 body, .form-all, .form-label, .form-sub-label, 

 input, textarea, select, button {

  font-family: "Arial Black", Gadget, Arial, sans-serif !important;

  font-size: 14px !important; /* Slightly smaller font size for better fit on mobile */

  line-height: 1.4; /* Optional: Adjust line height for mobile readability */

 }

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

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

Hi, Aries. The custom code provided fixed the issue in some places, but not
all. Please see the below screenshot for reference. Is there additional
code that could be added?

Best,
Cameron
...

Hi Cameron,

It seems the screenshot you shared is not properly uploaded. Can you upload it again so we can see what you are referring to?

Once we hear back from you, we'll be able to help you with this.

Hi, Aries. Here's a screenshot link: https://tinyurl.com/2dhjh9yj.

Hi Cameron,

I checked your form, and it seems you updated the form. You can try to inject these custom CSS codes below into your form.

@media only screen and (max-width: 500px) {

  /* Ensure labels go on top */

  .form-line {

    display: block !important;

    width: 100% !important;

  }

  .form-label {

    display: block !important;

    width: 100% !important;

    float: none !important;

    text-align: left !important;

    margin-bottom: 5px;

  }

  /* Stack checkboxes vertically */

  .form-checkbox-item,

  .form-radio-item {

    display: block !important;

    margin-bottom: 8px;

    width: 100% !important;

  }

  .form-checkbox-item label,

  .form-radio-item label {

    display: inline-block !important;

    width: auto !important;

  }

  /* Make sure the container doesn't overflow */

  .form-input-wide,

  .form-multiple-column {

    width: 100% !important;

    display: block !important;

    overflow-x: hidden !important;

  }

}

@media only screen and (max-width: 500px) {

  /* Your existing mobile styles already here... */



  #cid_24 {

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    flex-direction: column !important;

    text-align: center !important;

  }

  #cid_24 .qq-upload-button {

    margin: 10px auto !important;

    float: none !important;

    display: inline-block !important;

    text-align: center !important;

  }

  #cid_24 .qq-upload-button input {

    width: 100% !important;

    box-sizing: border-box !important;

  }

}

Here's my sample result:

Let us know if you need more adjustment.

Give it a try and let us know if you need any more help.

Hi, Aries. Although your advice was not helpful, I was able to fix the problem on my own accord. You can close this ticket.

Cameron

In my case, the desktop version looked great, but when viewed on a phone, fonts and spacing were completely different.

What really helped me was adding custom CSS specifically targeting mobile breakpoints (like @media only screen and (max-width: 600px)).

Also, turning off some of the responsive settings inside the form builder made a big difference — sometimes those auto-responses cause more harm than good.

Good luck! And honestly, it's comforting to know I'm not the only one fighting with mobile layouts.