Making Your Form Background Mobile Responsive

my forms are not showing up correctly on mobile

Hi Patty,

Thanks for reaching out to Jotform Support. I checked and tested your form on smaller screen but everything seems to be responding correctly. Please check out the screencast below for my result:

I've cleared your form's cache which should help. Can you try it again using a real mobile device and see how it goes? If the same thing happens again, let us know with a screenshot of what's happening so we can understand and help you better.

Keep us updated and let us know if you need any help.

I had to switch the layout to card form for it to display correctly, I really would like to use the classic form. How do I fix the mobile view for this?

Hi Patty,

Thanks for reaching out to us for help. In order to understand the issue better, can you share the details I listed below:

• Your phone model
• The version you are using
• Screen recording of the issue

You can share the video recording on any public sharing platform like Google Drive or Dropbox, or you can simply use Loom to record the video and share the video link with us.

Once we hear back from you, we'll be able to move forward with a solution.

Iphone 11

version 16.6.1

Using google browser

Image is distorted although the mobile view on the builder (mobile view) shows correctly.

Hi Patty,

That helped me to understand what’s happening. Injecting the Custom CSS Code below would fix your issue:

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

 .supernova {

  background-repeat: repeat!important;

  background-size: contain!important;

}

}

Can you go ahead and try it again and let us know how it goes? If the same thing happens again, we'll investigate it more to see if we can figure out what's going on.

Keep us updated and let us know if you need any more help.

With the above CSS Code it now looks like this:

I really would like it to look like the preview... like this....

Hi Patty,

When I cloned and tested your form, the same thing happened for me. After investigating it a bit, I found a solution. Can you inject this CSS code:

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

  body {

    position: relative;

  }

  

  .form-all {

    position: absolute;

    height: 100vh;

    width: 100vw;

    top: 0;

    overflow: scroll;

    margin-top: 0;

  }

}

Check out the screencast below to see my results:

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

YES! That's it! Thank you!!!!!